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来 源 : Vue.js 


教程 


起 步 


我 们 以 Vue 数据 绑 定 的 快速 导 览 开始 。 如 果 你 对 高 级 概述 更 感 兴趣 ， 可 查看 这 篇 博 


o 


尝试 Vue.js 最 简单 的 方法 是 使 用 JSFiddle Hello World 例子 。 在 浏览 器 新 标签 页 中 
打开 它 ， 跟 着 我 们 查看 一 些 基础 示例 。 如 果 你 喜欢 用 包 管 理 器 下 载 /安装 ， 查 看 安装 
教程 。 


Hello World 


<div id="app"> 
{{ message }} 
</div> 


new Vue({ 

el: '#app', 

data: { 

message: 'Hello Vue.js!' 
} 

}) 


Hello Vue.js! 


双向 绑 定 


<div id="app"> 

<p>{{ message }}</p> 
<input v-model="message"> 
</div> 


new Vue({ 

el: '4app', 

data: ( 

message: 'Hello Vue.js!' 
} 

}) 


Hello Vue.js! 


Hello Vue js! 


宣 染 列表 


^p 


«div id="app"> 

«ul» 

«li v-forz"todo in todos"» 
{{ todo.text }} 

</li> 

</ul> 
</div> 


new Vue({ 

el: '#app', 

data: { 

todos: [ 

{ text: 'Learn JavaScript' }, 
{ text: 'Learn Vue.js' }, 


{ text: 'Build Something Awesome' } 


] 
} 
) 


e Learn JavaScript 
e Learn Vue js 
。 Build Something Awesome 


处 理 用 户 输入 


<div id="app"> 

<p>{{ message }}</p> 

<button v-on:click="reverseMessage">Reverse Message</button> 
</div> 


new Vue({ 

el: '#app', 

data: { 

message: 'Hello Vue.js!' 

Hh 

methods: { 

reverseMessage: function () ( 
this.message = this.message.split('').reverse().join('') 
} 

} 
}) 


Hello Vue.js! 


Reverse Message 


ber & 
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«div id="app"> 

«input v-model-"newTodo" v-on:keyup.enter="addTodo"> 
«ul» 

<li v-for="todo in todos"> 

<span>{{ todo.text }}</span> 

«button v-on:click="removeTodo($index)">X</button> 
</li> 

</ul> 

</div> 


new Vue({ 

el: '#app', 

data: { 

newTodo: '', 

todos: [ 

{ text: 'Add some todos' } 
] 


ty 
methods: { 


addTodo: function () { 

var text = this.newTodo.trim() 
if (text) 1 

this.todos.push(( text: text }) 
this.newTodo = '' 

} 

ty 


removeTodo: function (index) { 
this.todos.splice(index, 1) 


} 
} 
3) 


e Add some todos | X 


希望 上 例 能 让 你 对 Vue.js 的 工作 原理 有 一 个 基础 概念 。 我 知道 你 现在 有 许多 疑问 
一 一 继续 阅读 ， 在 后 面 的 教程 将 一 一 解答 。 
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概述 


Vue.js (读音 /Vju?/, 类 似 于 view) 是 一 个 构建 数据 驱动 的 web 界面 的 库 。Vue.js 
的 目标 是 通过 尽 可 能 简单 的 API 实现 响应 的 数据 绑 定 和 组 合 的 视图 组 件 。 


Vue.js 自身 不 是 一 个 全 能 框架 一 一 它 只 聚焦 于 视图 层 。 因 此 它 非常 容易 学 习 ， 非 常 
容易 与 其 它 库 或 已 有 项 目 整合 。 另 一 方面 ， 在 和 与 相关 工具 和 支持 库 一 起 使 用 时 ， 
Vue.js 也 能 完美 地 了 驱动 复杂 的 单 页 应 用 。 


如 果 你 是 有 经 验 的 前 端 开 发 者 ， 想 知道 Vue.js 与 其 它 库 /框架 的 区 别 ， 查 看 对 比 其 
CHESS ; 如 果 你 对 使 用 Vue.js 开发 大 型 应 用 更 感 兴趣 ， 查 看 构建 大 型 应 用 。 


响应 的 数据 绑 定 


Vue.js 的 核心 是 一 个 响应 的 数据 绑 定 系统 ， 它 让 数据 与 DOM 保持 同步 非常 简单 。 

在 使 用 jQuery 手工 操作 DOM 时 ， 我 们 的 代码 常常 是 命令 式 的 、 重 复 的 与 易 错 的 。 
Vue.js 拥抱 数据 驱动 的 视图 概念 。 通 俗 地 讲 ， 它 意味 着 我 们 在 普通 HTML 模板 中 使 
用 特殊 的 语法 将 DOM “ 绑 定 ”到 底层 数据 。 一 旦 创建 了 绑 定 ，DOM 将 与 数据 保持 同 
步 。 每 当 修 改 了 数据 ，DOM 便 相应 地 更 新 。 这 样 我 们 应 用 中 的 逻辑 就 几乎 都 是 直 
接 修改 数据 了 ， 不 必 和 与 DOM 更 新 搅 在 一 起 。 这 让 我 们 的 代码 更 容易 撰写 、 理 解 与 
维护 。 


ViewModel 


DOM Listeners 





View 
, Y 
DOM : Plain JavaScript 
Objects 
Vue 
可 能 是 最 简单 的 例子 : 


<!-- 这 是 我 们 的 View --> 
<div id="example-1"> 

Hello {{ name }}! 
</div> 


// 这 是 我 们 的 Model 
var exampleData = { 
name: 'Vue.js' 


} 


// 创建 一 个 Vue 实例 或 "ViewModel" 
// 它 连 接 View 与 Model 
var exampleVM = new Vue({ 

el: '#example-1', 

data: exampleData 


}) 


结果 : 


Hello Vue.js! 


看 起 来 这 跟 单 单 泻 染 一 个 模板 非常 类 似 ， 但 是 Vue.js 在 背后 做 了 大 量 工作 。 并 且 
DOM 会 自动 响应 数据 的 变化 。 我 们 如 何 知道 ?打开 你 的 浏览 器 的 控制 台 ， 修 改 
exampleData.name ， 你 将 看 到 上 例 相 应 地 更 新 。 


注意 我 们 不 需要 撰写 任何 DOM 操作 代码 : 被 线 定 增强 的 HTML 模板 是 底层 数据 状 
态 的 声明 式 的 上 映射， 数据 不 过 是 普通 JavaScript 对 象 。 我 们 的 视图 完全 由 数据 驱 
动 。 


让 我 们 来 看 第 二 个 例子 : 
<div id="example-2"> 


<p v-if="greeting">Hello!</p> 
</div> 


var exampleVM2 = new Vue({ 
el: '#example-2', 


data: { 
greeting: true 
} 


}) 


Hello! 


这 里 我 们 遇 到 新 东西 。 你 看 到 的 v-if 特性 被 称 为 指令 。 指 令 带 有 前 缀 v- ， 以 
指示 它们 是 Vue.js 提供 的 特殊 特性 。 并 且 如 你 所 想象 的 ， 它 们 会 对 绑 定 的 目标 元 素 
添加 响应 式 的 特殊 行为 。 继 续 在 控制 台 设 置 examplevM2.greeting 为 

false , (RARM “Hello!” 消失 了 。 


第 二 个 例子 演示 了 我 们 不 仅 可 以 绑 定 DOM 文本 到 数据 ， 也 可 以 绑 定 DOM 结构 到 
数据 。 而 且 ，Vue.js 也 提供 一 个 强大 的 过 渡 效 果 系 统 ， 可 以 在 Vue 插入 /删除 元 素 
时 自动 应 用 过 渡 效 果 。 


也 有 一 些 其 它 指 令 ， 每 个 都 有 特殊 的 功能 。 例 如 v-for 指令 用 于 显示 数组 元 
素 ， v-bind 指令 用 于 绑 定 HTML 特性 。 我 们 将 在 后 面 详 细 讨 论 全 部 的 数据 绑 定 
语法 。 


组 件 系统 


组 件 系统 是 Vue.js 另 一 个 重要 概念 ， 因 为 它 提供 了 一 种 抽象 ， 让 我 们 可 以 用 独立 可 
复 用 的 小 组 件 来 构建 大 型 应 用 。 如 果 我 们 考虑 到 这 点 ， 几 乎 任意 类 型 的 应 用 的 界面 
都 可 以 抽象 为 一 个 组 件 树 : 









实际 上 ， 一 个 典型 的 用 Vue.js 构建 的 大 型 点 用 将 形成 一 个 组 件 树 。 在 后 面 的 教程 中 
我 们 将 详 述 组 件 ， 不 过 这 里 有 一 个 假想 的 例子 ， 看 看 使 用 了 组 件 的 应 用 模板 是 什么 
样 的 : 


<div id="app"> 
«app-nav»«/app-nav» 
<app-view> 
«app-sidebar»«/app-sidebar» 
<app-content></app-content> 
</app-view> 

</div> 


你 可 能 已 经 注意 到 Vue js 组 件 非常 类 似 于 自 定义 元 素 一 一 它 是 Web 组 件 规范 的 一 
部 分 。 实 际 上 Vue.js 的 组 件 语 法 参考 了 该 规范 。 例 如 Vue 组 件 实现 了 Slot API 与 
is 特性 。 但 是 ， 有 几 个 关键 的 不 同 : 


1. Web 组 件 规范 仍然 远 未 完成 ， 并 且 没 有 浏览 器 实现 。 相 比 之 下 ，Vue.js 组 件 不 
需要 任何 补丁 ， 并 且 在 所 有 支持 的 浏览 器 (IE9 及 更 高 版 本 ) 之 下 表现 一 致 。 
必要 时 ，Vue.js 组 件 也 可 以 放 在 原生 自 定义 元 素 之 内 。 


2. Vue.js 组 件 提供 了 原生 自 定义 元 素 所 不 具 各 的 一 些 重要 功能 ， 比 如 组 件 问 的 数 
据 流 ， 自 定义 事件 系统 ， 以 及 动态 的 、 带 特效 的 组 件 蔡 换 。 


组 件 系统 是 用 Vue.js 构建 大 型 应 用 的 基础 。 另 外 ，Vue.js 生态 系统 也 提供 了 高 级 工 
具 与 多 种 支持 库 ， 它 们 和 Vue.js 一 起 构成 了 一 个 更 加 “框架 "性 的 系统 。 


Vue 实例 


构造 器 
每 个 Vue.js 应 用 的 起 步 都 是 通过 构造 函数 vue 创建 一 个 Vue 的 根 实例 : 


var vm = new Vue({ 
// 选项 
}) 


— Vue 实例 其 实 正 是 一 个 MVVM 模式 中 所 描述 的 ViewModel - 因此 在 文档 中 经 
常会 使 用 vm 这 个 变量 名 。 


在 实例 化 Vue 时 ， 需 要 传人 一 个 选项 对 象 ， 它 可 以 包含 数据 、 模 板 、 挂 载 元 素 、 方 
法 、 生 命 周 期 钩子 等 选项 。 全 部 的 选项 可 以 在 API 文档 中 查看 。 


可 以 扩展 Vue 构造 器 ， 从 而 用 预定 义 选项 创建 可 复 用 的 组 件 构造 器 : 


var MyComponent = Vue.extend({ 
// 扩展 选项 
}) 


// 所 有 的 “MyComponent ”实例 都 将 以 预定 义 的 扩展 选项 被 创建 
var myComponentInstance = new MyComponent() 


尽管 可 以 命令 式 地 创建 扩展 实例 ， 不 过 在 多 数 情况 下 将 组 件 构 造 器 注册 为 一 个 自 定 
义 元 素 ， 然 后 声明 式 地 用 在 模板 中 。 我 们 将 在 后 面 详细 说 明 组 件 系 统 。 现 在 你 只 需 
知道 所 有 的 Vue.js 组 件 其 实 都 是 被 扩展 的 Vue 实例 。 


属性 与 方法 


每 个 Vue 实例 都 会 代理 其 data 对 象 里 所 有 的 属性 : 


var data = { a: 1 } 
var vm = new Vue({ 


data: data 
3) 
vm.a --- data.a // -&gt; true 


// 设置 属性 也 会 影响 到 原始 数据 
vm.a = 2 
data.a // -&gt; 2 


// ..， 反之 亦 然 
data.a = 3 
vm.a // -&gt; 3 


注意 只 有 这 些 被 代理 的 属性 是 响应 的 。 如 果 在 实例 创建 之 后 添加 新 的 属性 到 实例 
E 它 不 会 触发 视图 和 更新。 我 们 将 在 后 面 详细 讨论 响应 系统 。 


除了 这 些 数 据 属性 ，Vue 实例 暴露 了 一 些 有 用 的 实例 属性 与 方法 。 这 些 属 性 与 方法 
都 有 前 级 $ ， 以 便 与 代理 的 数据 属性 区 分 。 例 如 : 


var data = { a: 1 } 
var vm = new Vue({ 
el: '#example', 


data: data 
}) 
vm. $data === data // -&gt; true 
vm.$el === document.getElementById('example') // -&gt; true 


// $watch 是 一 个 实例 方法 
vm.$watch('a', function (newVal, oldVal) { 
/ 这 个 回调 将 在 `vm.a” 改变 后 调用 


参考 API 文档 查看 全 部 的 实例 属性 与 方法 。 


实例 生命 周期 


Vue 实例 在 创建 时 有 一 系列 初始 化 步骤 一 一 例如 ， 它 需要 建立 数据 观察 ， 编 译 模 
板 ， 创 建 必 要 的 数据 绑 定 。 在 此 过 程 中 ， 它 也 将 调用 一 些 生 命 周 期 钩子 ， 给 自 定义 
逻辑 提供 运行 机 会 。 例 如 created 钧 子 在 实例 创建 后 调用 : 


var vm = new Vue({ 
data: { 
a: 1 
ty 
created: function () { 
// “this” 指 向 vm 实例 
console.log('a is: ' + this.a) 


T/A cSdbe aes 


也 有 一 些 其 它 的 钩子 ， 在 实例 生命 周期 的 不 同 阶段 调用 ， 如 compiled 、 

ready 、 destroyed > $4 F9 this 指向 调用 它 的 Vue 实例 。 一 些 用 户 可 能 
会 问 Vue.js 是 否 有 “控制 器 ”的 概念 ? 答案 是 ， 没 有 。 组 件 的 自 定义 逻辑 可 以 分 割 在 
jx E625 -Y- rn, 


生命 周期 图 示 


下 图 说 明了 实例 的 生命 周期 。 你 不 需要 立马 弄 明白 所 有 的 东西 ， 不 过 以 后 它 会 有 帮 


o 
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Vue 实例 


数据 绑 定 语法 
Vue.js 的 模板 是 基于 DOM 实现 的 。 这 意味 着 所 有 的 Vue.js 模板 都 是 可 解析 的 有 效 


的 HTML， 且 通过 一 些 特殊 的 特性 做 了 增强 。Vue 模板 因而 从 根本 上 不 同 于 基于 字 
符 串 的 模板 ， 请 记 住 这 点 。 


插值 


文本 
数据 绑 定 最 基础 的 形式 是 文本 插值 ， 使 用 “Mustache” 语法 (RAIS) 


<span>Message: {{ msg }}</span> 


Mustache 标签 会 被 相应 数据 对 象 的 msg 属性 的 值 蔡 换 。 每 当 这 个 属性 变化 时 它 
也 会 更 新 。 


你 也 可 以 只 处 理 单 次 插值 ， 今 后 的 数据 变化 就 不 会 再 引起 插值 更 新 了 : 


<span>This will never change: {{* msg }}</span> 


原始 的 HTML 


X Mustache 标签 将 数据 解析 为 纯 文 本 而 不 是 HTML。 为 了 输出 真 的 HTML 字符 
串 ， 需 要 用 三 Mustache 标签 : 


<div>{{{ raw html }}}</div> 


内 容 以 HTML 字符 串 插入 一 一 数据 绑 定 将 被 忽略 。 如 果 需 要 复 用 模板 片断 ， 应 当 使 
用 partials。 


在 网 站 上 动态 泻 染 任意 HTML 是 非常 危险 的 ， 因 为 容易 导致 XSS 攻击 。 记 住 ， 只 
对 可 信 内 容 使 用 HTML 插值 ， 永 不 用 于 用 户 提交 的 内 容 。 


HTML 特性 


Mustache 标签 也 可 以 用 在 HTML 特性 (Attributes) 内 : 


<div id="item-{{ id }}"></div> 


注意 在 Vue.js 指令 和 特殊 特性 内 不 能 用 插值 。 不 必 担 心 ， 如 果 Mustache 标签 用 错 
了 地 方 Vue.js 会 给 出 警告 。 


Jf FE Pei TV 

放 在 Mustache 标签 内 的 文本 称 为 绑 定 表达 式 。 在 Vue.js 中 ， 一 段 绑 定 表达 式 由 一 
个 简单 的 JavaScript 表达 式 和 可 选 的 一 个 或 多 个 过 滤器 构成 。 

JavaScript 表达 式 


到 目前 为 止 ， 我 们 的 模板 只 绑 定 到 简单 的 属性 键 。 不 过 实际 上 Vue.js 在 数据 绑 定 内 
支持 全 功能 的 JavaScript 表达 式 : 


{{ number + 1 }} 
{{ ok ? "YES" : 'NO' }} 
{{ message.split('').reverse().join('') }} 


这 些 表达 式 将 在 所 属 的 Vue 实例 的 作用 域内 计算 。 一 个 限制 是 每 个 绑 定 只 能 包含 单 
个 表达 式 ， 因 此 下 面 的 语句 是 无 效 的 : 


EE 这 是 一 个 语 吾 句 ， 不 是 一 个 表达 式 : --> 
{{ var a=1 }} 


= 流程 控制 也 不 可 以 ， 可 改 用 三 元 表达 式 - 
if (ok) { return message } }} 


Vue. js 允许 在 表达 式 后 添加 可 选 的 * 过 滤器 (Filter) ”， 以 “管道 符 "指示 : 


{{ message &#124; capitalize }} 


这 里 我 们 将 表达 式 message BAS (pipe) ”到 内 和 置 的 capitalize 过 滤 
器 ， 这 个 过 滤器 其 实 只 是 一 个 JavaScript 函数 ， 返 回 大 宇 化 的 值 。Vue.js 提供 数 个 
内 置 过 滤器 ， 在 后 面 我 们 会 谈 到 如 何 开 发 自己 的 过 滤器 。 


注意 管道 语法 不 是 JavaScript 语法 ， 因 此 不 能 在 表达 式 内 使 用 过 滤器 ， 只 能 添加 到 
表达 式 的 后 面 。 


过 滤器 可 以 串联 : 


{{ message &#124; filterA &#124; filterB }} 


过 滤器 也 可 以 接受 参数 : 


{{ message &#124; filterA 'arg1' arg2 }} 
过 滤器 西数 始终 以 表达 式 的 值 作 为 第 一 个 参数 。 带 引号 的 参数 视 为 字符 串 ， 而 不 带 


引号 的 参数 按 表达 式 计算 。 这 里 ， 字 符 串 'arg1' 将 传 给 过 滤器 作为 第 二 个 参 
数 ， 表 达 式 arg2 的 值 在 计算 出 来 之 后 作为 第 三 个 参数 。 


BA 
E TJ 
1845 (Directives) 是 特殊 的 带 有 前 级 v- 的 特性 。 指 邻 的 值 限定 为 绑 定 表达 式 ， 因 
此 上 面 提 到 的 JavaScript 表达 式 及 过 滤器 规则 在 这 里 也 适用 。 指 邻 的 职责 就 是 当 其 
Fee eran anette eee 
列子 : 


<p v-if="greeting">Hello! </p> 


这 里 v-if TARR greeting 值 的 真 假 删 除 / 插 入 <p> 元 素 。 


参数 


有 些 指 邻 可 以 在 其 名 称 后 面 带 一 个 “参数 " (Argument)， 中 间 放 一 个 冒号 隔 开 。 例 
如 ， v-bind 指令 用 于 响应 地 更 新 HTML 特性 : 


<a v-bind:href="url"></a> 


这 里 href 是 参数 ， 它 告诉 v-bind 指令 将 元 素 的 href 特性 跟 表 达 式 url 
的 值 绑 定 。 可 能 你 已 注意 到 可 以 用 特性 插值 href="{{url}}" 获得 同样 的 结果 : 
这 样 没 错 ， 并 且 实 际 上 在 内 部 特性 插值 会 转 为 v-bind WHE. 


另 一 个 例子 是 v-on 指令 ， 它 用 于 监听 DOM 事件 : 


<a v-on:click="doSomething"> 


Here the argument is the event name to listen to. We will talk about event 
handling in more details too. 这 里 参数 是 被 监听 的 事件 的 名 字 。 我 们 也 会 详细 说 明 
事件 绑 定 。 


修饰 符 


修饰 符 (Modifiers) 是 以 半角 句号 . 开始 的 特殊 后 级 ， 用 于 表示 指使 应 当 以 特殊 
ARRE. PA .literal 修饰 符 告诉 指令 将 它 的 值 解 析 为 一 个 字面 字符 串 而 不 
是 一 个 表达 式 : 


<a v-bind:href.literal="/a/b/c"></a> 


然 ， 这 似乎 没有 意义 ， 因 为 我 们 只 需要 使 用 href="/a/b/c" 而 不 必 使 用 一 
E 这 个 例子 只 是 为 了 演示 语法 。 后 面 我 们 将 看 到 修饰 符 更 多 的 实践 用 法 。 


45-5 


v- 前 级 是 一 种 标识 模板 中 特定 的 Vue 特性 的 视觉 暗示 。 当 你 需要 在 一 些 现 有 的 
HTML 代码 中 添加 动态 行为 时 | 这 些 前 级 可 以 起 到 很 好 的 区 分 效果 。 但 你 在 使 用 一 
常用 指使 的 时 候 ， 你 会 感觉 一 直 这 么 写实 在 是 哆 味 。 而 且 在 构建 单 页 应 用 时 ， 
Viie is 会 管理 所 有 的 模板 ， 此 时 v- 前 级 也 没 那 么 重要 了 。 因 此 Vue.js 为 两 个 最 

常用 的 指令 v-bind 和 v-on 提供 特别 的 缩写 : 


v-bind 缩写 
<!-- 完整 语法 --> 
<a v- SEE href="url"></a> 


<!-- 缩写 --> 
<a :href="url"></a> 


<!-- 完整 语法 - -> 
«button v-bind:disabled="someDynamicCondition">Button</button> 


<!-- 缩写 --> 
«button :disabled="someDynamicCondition">Button</button> 


v-on 缩写 


<!-- 完整 语法 - -> 
<a v-on:click="doSomething"></a> 


<!-- 缩写 --> 
<a @click="doSomething"></a> 


它们 看 起 来 跟 “ 合 法 "的 HTM 有 点 不 同 ， 但 是 它们 在 所 有 Vue.js 支持 的 浏览 器 中 都 
能 被 正确 地 解析 ， 并 且 不 会 出 现在 最 终 温 染 的 标记 中 。 缩 写 语 法 完全 是 可 选 的 ， 不 
过 随 着 一 步 步 学 习 的 深入 ， 你 会 庆幸 拥有 它们 。 


计算 属性 


在 模板 中 表达 式 非 常 便利 ， 但 是 它们 实际 上 只 用 于 简单 的 操作 。 模 板 是 为 了 描述 视 
图 的 结构 。 在 模板 中 放 入 太 多 的 逻辑 会 让 模板 过 重 且 难 以 维护 。 这 就 是 为 什么 
Vue.js 将 绑 定 表达 式 限制 为 一 个 表达 式 。 如 果 需 要 多 于 一 个 表达 式 的 逻辑 ， 应 当 使 
用 计算 属性 。 


基础 例子 


&lt;div id="example"&gt; 
a={{ a }}, b={{ b }} 
&lt;/div&gt; 


var vm = new Vue({ 
el: '#example', 
data: { 
a: 1 
Hh 
computed: ( 
// 一 个 计算 属性 的 getter 
b: function () { 
// ^this' #8 vm 实例 
return this.a + 1 
} 
} 
}) 


结果 : 
a=1, b=2 


这 里 我 们 声明 了 一 个 计算 属性 b 。 我 们 提供 的 函数 将 用 作 属 性 vm.b 的 getter, 


console.log(vm.b) // -&gt; 2 
vm.a = 2 
console.log(vm.b) // -&gt; 3 


你 可 以 打开 浏览 器 的 控制 台 ， 修 改 例子 的 vm。 vm.b 的 值 始终 取决 于 vm.a 的 
值 。 


(RA LURE EA RE — HE CER HR ZEE ERE, Vue 知道 vm.b 依赖 于 
vm.a ， 因 此 当 vm.a 发 生 改 变 时 ， 依 赖 于 vm.b 的 绑 定 也 会 更 新 。 而 且 最 妙 
的 是 我 们 是 声明 式 地 创建 这 种 依赖 关系 : 计算 属性 的 getter 是 干净 无 副作用 的 ， 
此 也 是 易于 测试 和 理解 的 。 


计算 属性 vs. $watch 


Vue.js 提供 了 一 个 方法 $watch ， 它 用 于 观察 Vue 实例 上 的 数据 变动 。 当 一 些 数 
据 需 要 根据 其 它 数据 变化 时 ， swatch 很 请 人 一 一 特别 是 如 果 你 来 自 
AngularJS。 不 过 ， 通 常 更 好 的 办 法 是 使 用 计算 属性 而 不 是 一 个 命 合式 的 swatch 
回调 。 考 虑 下 面 例子 : 


&lt;div id="demo"&gt; {{fullName}}&lt;/divagt; 


var vm = new Vue({ 
data: { 
firstName: 'Foo', 
lastName: 'Bar', 
fullName: 'Foo Bar' 


} 
}) 
vm.$watch('firstName', function (val) { 
this.fullName = val + ' ' + this.lastName 
}) 
vm.$watch('lastName', function (val) { 
this.fullName = this.firstName + ' ' + val 
}) 


上 面 代码 是 命令 式 的 重复 的 。 跟 计算 属性 对 比 : 


var vm = new Vue({ 

data: { 

firstName: 'Foo', 
lastName: 'Bar' 
}, 

computed: { 

fullName: function () { 
return this.firstName + ' ' + this.lastName 
T 
} 

}) 


BU, Rey? 


计算 setter 


计算 属性 默认 只 是 getter， 不 过 在 需要 时 你 也 可 以 提供 一 个 setter : 


Vc 

computed: { 

fullName: ( 

// getter 

get: function () { 

return this.firstName + ' ' + this.lastName 
ty 

// setter 

set: function (newValue) { 

var names = newValue.split(' ') 
this.firstName = names[0] 

this.lastName = names[names.length - 1] 


} 


A/ 


现在 在 调用 vm.fullName = 'John Doe' 时 ，Setter 会 被 调 
Fa, vm.firstName 和 vm.lastName 也 会 有 相应 更 新 。 


天 于 计算 属性 背后 的 原理 和 技术 细节 详 见 响应 系统 介绍 中 的 具体 章节 。 


Class 5 Style 4 


数据 绑 定 一 个 常见 需求 是 操作 元 素 的 class 列表 和 它 的 内 联 样式 。 因 为 它们 都 是 属 
性 ， 我 们 可 以 用 v-bind KEGN : 我 们 只 需要 计算 出 表达 式 最 终 的 字符 串 。 不 
过 ， 字 符 串 拼接 麻烦 又 易 错 。 因 此 ， 在 v-bind 用 于 class 和 style 时 ， 

Vuejs 专门 增强 了 它 。 表 达 式 的 结果 类 型 除了 字符 串 之 外 ， 还 可 以 是 对 象 或 数组 。 


wE HTML Class 


尽管 可 以 用 Mustache 标签 绑 定 class, [ba class="{{ className 3)" ， 但 是 
我 们 不 推荐 这 种 写法 和 v-bind:class 混用 。 两 者 只 能 选 其 一 ! 


对 象 语 法 


我 们 可 以 传 给 v-bind:class 一 个 对 象 ， 以 动态 地 切换 class, XX 
v-bind:class 指使 可 以 与 普通 的 class 特性 共存 : 





<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': 


[E| 


isB 





data: { 
isA: true, 
isB: false 


<div class="static class-a"></div> 


4 isA 和 isB 变化 时 ，class 列表 将 相应 地 更 新 。 例 如 ， 如 果 isB FH 
true , class 列表 将 变 为 "static class-a class-b" , 


你 也 可 以 直接 绑 定 数据 里 的 一 个 对 象 : 


<div v-bind:class="classObject"></div> 


data: { 
classObject: { 
'class-a': true, 
'class-b': false 
} 

} 


我 们 也 可 以 在 这 里 绑 定 一 个 返回 对 象 的 计算 属性 。 这 是 一 个 常用 且 强 大 的 模式 。 


数组 语法 
我 们 可 以 把 一 个 数组 传 给 v-bind:class ， 以 应 用 一 个 class 列表 : 


<div v-bind:class="[classA, classB]"> 


data: { 
classA: 'class-a', 
classB: 'class-b' 


j 


«div class="class-a class-b"></div> 


如 果 你 也 想 根 据 条 件 切换 列表 中 的 class， 可 以 用 三 元 表达 式 : 


<div v-bind:class="[classA, isB ? classB : '']"> 


此 例 始终 添加 classA ， 但 是 只 有 在 isB = true 时 添加 classB 。 


绑 定 内 联 样式 
对 象 语法 


v-bind:style 的 对 象 语法 十 分 直观 看 着 非常 像 CSS， 其 实 它 是 一 个 
JavaScript 对 象 。CSS 属性 名 可 以 用 驼峰 式 (camelCase) 或 短 横 分 隔 命名 
(kebab-case) 





«div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' 


«j _ — e 








data: { 
activeColor: 'red', 
fontSize: 30 


} 


直接 绑 定 到 一 个 样式 对 象 通常 更 好 ， 让 模板 更 清晰 : 
«div v-bind:style="styleObject"></div> 
data: { 
styleObject: { 
color: 'red', 


fontSize: '13px' 


} 
} 


同样 的 ， 对 象 语法 常常 结合 返回 对 象 的 计算 属性 使 用 。 


数组 语法 
v-bind:style 的 数组 语法 可 以 将 多 个 样式 对 象 应 用 到 一 个 元 素 上 : 


<div v-bind:style="[styleObjectA, styleObjectB]"> 


目 动 添加 前 级 


当 v-bind:style 使 用 需要 厂商 前 级 的 CSS 属性 时 ， 如 transform , Vue.js 
会 自动 侦 测 并 添加 相应 的 前 级 。 


| 中 


AS 


条 件 ; 


V-if 
在 字符 串 模板 中 ， 如 Handlebars， 我 们 得 像 这 样 写 一 个 条 件 块 : 


<!-- Handlebars 模板 --> 
(Gif ok}} 

<hi>Yes</h1i> 

{{/if}} 


在 Vue.js， 我 们 使 用 v-if 指令 实现 同样 的 功能 : 


«hi v-if="ok">Yes</h1> 


也 可 以 用 v-else 添加 一 个 “else” 块 : 


<hi v-if="ok">Yes</h1> 
<hi v-else>No</h1> 


template v-if 


因为 v-if 是 一 个 指令， 需要 将 它 添 加 到 一 个 元 素 上 。 但 是 如 果 我 们 想 切 换 多 个 
元 素 呢 ? 此 时 我 们 可 以 把 一 个 «template» 元 素 当 做 包装 元 素 ， 并 在 上 面 使 用 


v-if ， 最 终 的 泻 染 结果 不 会 包含 它 。 


«template v-if="ok"> 
<hi>Title</h1> 
<p>Paragraph 1</p> 
<p>Paragraph 2</p> 

</template> 


v-show 
另 一 个 根据 条 件 展示 元 素 的 选项 是 v-show dE. RDORAUE—A: 


<hi v-show="ok">Hello!</h1> 


不 同 的 是 有 v-show 的 元 素 会 始终 演 染 并 保持 在 DOM 中 。 v-show 是 简单 的 切 
换 元 素 的 CSS 属性 display 。 


注意 v-show 不 支持 <template> 语法 。 


v-else 
可 以 用 v-else 指令 给 v-if 或 v-show 添加 一 个 “else 2": 


<div v-if="Math.random() > 0.5"> 
sorry 
</div> 
<div v-else> 
Not sorry 
</div> 


v-else 元 素 必 须 立 即 跟 在 v-if EX v-show 元 素 的 后 面 一 一 否则 它 不 能 被 识 
别 。 


v-if vs. v-show 


在 切换 v-if 3kHj, Vuejs B— CARR AERE, AA v-if 之 中 的 模板 
也 可 能 包括 数据 绑 定 或 子 组 件 。 v-if 是 真实 的 条 件 泻 染 ， 因 为 它 会 确保 条 件 块 
在 切换 当中 合适 地 销毁 与 重建 条 件 块 内 的 事件 监听 器 和 子 组 件 。 

v-if 也 是 惰性 的 : 如 果 在 初始 泻 染 时 条 件 为 假 ， 则 什么 也 不 做 一 一 在 条 件 第 一 
次 变 为 真 时 才 开 始 局 部 编译 (编译 会 被 缓存 起 来 )。 

相 比 之 下 ， v-show 简单 得 多 一 一 元 素 始 终 被 编译 并 保留 ， 只 是 简单 地 基于 CSS 
切换 。 

一 般 来 说 ， v-if 有 更 高 的 切换 消耗 而 v-show 有 更 高 的 初始 泻 染 消耗 。 因 此 ， 
如 果 需 要 频繁 切换 v-show 较 好 ， 如 果 在 运行 时 条 件 不 大 可 能 改变 v-if 较 
好 。 


v-for 


可 以 使 用 v-for 指令 基于 一 个 数组 演 染 一 个 列表 。 这 个 指令 使 用 特殊 的 语法 ， 形 
式 为 item in items ， items 是 数据 数组 ， item 是 当前 数组 元 素 的 别名 : 


示例 : 


<ul id="example-1"> 

<li v-for="item in items"> 
{{ item.message }} 

</li> 
</ul> 


var example1 = new Vue({ 
el: '#example-1', 

data: { 

items: [ 

{ message: 'Foo' }, 

{ message: 'Bar' } 


e Foo 
。 Bar 


ft v-for 块 内 我 们 能 完全 访问 父 组 件 作用 域内 的 属性 ， 另 有 一 个 特殊 变量 
$index ， 正 如 你 猜 到 的 ， 它 是 当前 数组 元 素 的 索引 : 


<ul id="example-2"> 

<li v-for="item in items"> 

{{ parentMessage 3) - {{ $index }} - {{ item.message }} 
</li> 
</ul> 


var example2 = new Vue({ 
el: '#example-2', 
data: { 
parentMessage: 'Parent', 
items: [ 
{ message: 'Foo' }, 
{ message: 'Bar' } 


« Parent - 0 - Foo 
。 Parent - 1 - Bar 


另外 ， 你 可 以 为 索引 指定 一 个 别名 GOR v-for 用 于 一 个 对 象 ， 则 可 以 为 对 象 的 
键 指 定 一 个 别名 ) 


<div v-for="(index, item) in items"> 
{{ index }} {{ item.message }} 
</div> 


template v-for 


类 似 于 template v-if ， 也 可 以 将 v-for 用 在 «template» ät, MWE% 
一 个 包含 多 个 元 素 的 块 。 例 如 : 


<ul> 

<template v-for="item in items"> 
<li>{{ item.msg }}</1i> 

<li class="divider"></1li> 
</template> 

</ul> 


数组 变动 检测 


变异 方法 
VueJjs 包装 了 被 观察 数组 的 变异 方法 ， 故 它们 能 触发 视图 更 新 。 被 包装 的 方法 有 : 


push() 
pop() 
shift() 
unshift() 
splice() 
sort() 
reverse() 


你 可 以 打开 浏览 器 的 控制 人 台 ， 用 这 些 方法 修改 上 例 的 items 数组 。 例 


如 : example1.items.push({ message: 'Baz' }) e 


蔡 换 数组 


变异 方法 ， 如 名 字 所 示 ， 修 改 了 原始 数组 。 相 比 之 下 ， 也 有 非 变 异 方法 ， 如 
filter() , concat() 和 slice() ， 不 会 修改 原始 数组 而 是 返回 一 个 新 数 
组 。 在 使 用 非 变异 方法 时 ， 可 以 直接 用 新 数组 蔡 换 旧 数 组 : 


examplei.items = examplei.items.filter(function (item) { 
return item.message.match(/Foo/) 


T) 


可 能 你 觉得 这 将 导致 Vue.js 弃 用 已 有 DOM 并 重新 演 染 整个 列表 一 -一 幸运 的 是 并 非 
如 此 。 Vue.js 实现 了 一 些 启 发 算法 ， 以 最 大 化 复 用 DOM 元 素 ， 因 而 用 另 一 个 数组 
替换 数组 是 一 个 非常 高 效 的 操作 。 


track-by 


有 时 需要 用 全 新 对 象 〈 例 如 通过 API 调用 创建 的 对 象 ) 蔡 换 数组 。 因 为 v-for 

默认 通过 数据 对 象 的 特征 来 决定 对 已 有 作用 域 和 DOM 元 素 的 复 用 程度 ， 这 可 能 

致 重新 泻 染 整个 列表 。 但 是 ， 如 果 每 个 对 象 都 有 一 个 唯一 ID 的 属性 ， 便 可 以 使 用 
track-by 特性 给 Vue.js 一 个 提示 ，Vue.js 因而 能 尽 可 能 地 复 用 已 有 实例 。 


例如 ， 假 定数 据 为 : 


{ 
items: [ 
curd: 88h 809d" oa by 
{ _uid: 7496610") ... } 
] 

} 


然后 可 以 这 样 给 出 提示 : 


<div v-for="item in items" track-by="_uid"> 
<!-- content --> 
</div> 


然后 在 替换 数组 items 时 ， 如 果 Vue.js 遇 到 一 个 包含 _uid: '88f869d' 的 新 
对 象 ， 它 知道 它 可 以 复 用 这 个 已 有 对 象 的 作用 域 与 DOM 元 素 。 


track-by $index 


如 果 没 有 唯一 的 键 供 追踪 ， 可 以 使 用 track-by="$index" ， 它 强制 让 v-for 
进入 原 位 更 新 模式 : 片断 不 会 被 移动 ， 而 是 简单 地 以 对 应 索引 的 新 值 刷 新 。 这 种 模 
式 也 能 处 理 数 据 数组 中 重复 的 值 。 


这 让 数据 替换 非常 高 效 ， 但 是 也 会 付出 一 定 的 代价 。 因 为 这 时 DOM 节点 不 再 映射 
数组 元 素 顺 序 的 改变 ， 不 能 同步 临时 状态 (比如 «input» 元 素 的 值 ) 以 及 组 件 的 
私有 状态 。 因 此 ， 如 果 v-for 块 包含 «input» 元 素 或 子 组 件 ， 要 小 心 使 用 
track-by="$index" 

问题 

因为 JavaScript 的 限制 ，Vue.js 不 能 检测 到 下 面 数 组 变化 : 


1. 直接 用 索引 设置 元 素 ， 如 vm.items[0] = {} 
2. 修改 数据 的 长 度 ， 如 vm.items.length = 0. 


为 了 解决 问题 (1), Vuejs 扩展 了 观察 数组 ， 为 它 添 加 了 一 个 $set() DR: 


// 5& ^examplei.items[0] = ...' ”相同 ， 但 是 能 触发 视图 更 新 
examplei.items.$set(0, { childMsg: 'Changed!'}) 
至 于 问题 (2)， 只 需 用 一 个 空 数组 替换 items. 


除了 S$set(), Vuejs 也 为 观察 数组 添加 了 $remove() 方法 ， 用 于 从 目标 数组 
中 查找 并 删除 元 素 ， 在 内 部 它 调 用 splice() 。 因 此 ， 不 必 这 样 : 


var index = this.items.indexOf(item) 
if (index !== -1) { 
this.items.splice(index, 1) 


只 用 这 样 : 


this.items.$remove(item) 


对 象 v-for 


也 可 以 使 用 v-for 
个 特殊 变量 $key 。 


<ul id="repeat-object" class="demo"> 
<li v-for="value in object"> 

{{ $key }} : {{ value jj 

</li> 
</ul> 


new Vue({ 

el: '#repeat-object', 
data: { 

object: { 

FirstName: 'John', 
LastName: 'Doe', 

Age: 30 

} 

} 

}) 


结果 : 


。 FirstName : John 
« LastName: Doe 
e Age: 30 


也 可 以 给 对 象 的 键 提供 一 个 别名 : 


<div v-for="(key, val) in object"> 


{{ key }} {{ val jj 


</div> 


在 通 历 对 象 时 ， 是 按 Object. keys() Met Rin, (BE 


同 的 JavaScript 引擎 下 是 一 致 的 。 


值 域 v-for 
v-for 也 可 以 接收 一 个 整数 ， 此 时 它 将 重复 模板 数 次 。 


通 历 对 象 。 除 了 $index 之 外 ， 作 用 域内 还 可 以 访问 另外 一 


不 能 保证 它 的 结果 在 不 


<div> 
<span v-for="n in 10">{{ n }} </span> 
</div> 


结果 : 


0123456789 


显示 过 滤 / 排 序 的 结果 
有 时 我 们 想 显示 过 滤 / 排 序 过 的 数组 ， 同 时 不 实际 修改 或 重 置 原始 数据 。 有 两 个 办 


X 
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. 创建 一 个 计算 属性 ， 返 回 过 滤 /排序 过 的 数组 ; 
^ 使 用 内 和 置 的 过 滤器 filterBy 和 orderBy o 


计算 属性 有 更 好 的 控制 力 ， 也 更 灵活 ， 因 为 它 是 全 功能 JavaScript。 但 是 
器 更 方便 ， 详 细 见 API. 


JH R5 RE he E d 
方法 处 理 器 


可 以 用 v-on 指令 监听 DOM 事件 : 


<div id="example"> 
<button v-on:click="greet">Greet</button> 
</div> 


我 们 绑 定 了 一 个 单 击 事件 义理 器 到 一 个 方法 greet o FAE Vue 实例 中 定义 这 个 
方法 : 


var vm = new Vue({ 

el: '#example', 

data: { 

name: 'Vue.js' 

ty 

// f£ "methods 对象 中 定义 方法 
methods: { 

greet: function (event) { 
// 方法 内 ^this' ”指向 vm 
alert('Hello ' + this.name + '!') 
// ^event^ @iR4 DOM 事件 
alert(event.target.tagName) 
} 

} 
}) 


// 也 可 以 在 JavaScript 代码 中 调用 方法 
vm.greet() // -> 'Hello Vue.js!' 


自己 测试 一 下 : 


Greet 


FJ 3x i& n] A^ T gs 


除了 直接 绑 定 到 一 个 方法 ， 也 可 以 用 内 联 JavaScript 语句 : 


<div id="example-2"> 

<button v-on:click="say('hi')">Say Hi</button> 
<button v-on:click="say('what')">Say What</button> 
</div> 


new Vue({ 
el: '#example-2', 
methods: { 
say: function (msg) { 
alert(msg) 
} 
3) 
Result: 


Say Hi || Say What 


类 似 于 内 联 表达 式 ， 事 件 处 理 器 限制 为 一 个 语句 。 


有 时 也 需要 在 内 联 语句 处 理 器 中 访问 原生 DOM 事件 。 可 以 用 特殊 变量 $event 
把 它 传 人 方法 : 


«button v-on:click-z"say('hello!', $event)">Submit</button> 


U 

methods: { 
say: function (msg, event) { 
// 现在 我 们 可 以 访问 原生 事件 对 象 
event.preventDefault() 


} 
} 


事件 修饰 符 


在 事件 处 理 器 中 经 常 需要 调用 event.preventDefault() 或 
event.stopPropagation() 。 尽 管 我 们 在 方法 内 可 以 轻松 做 到 ， 不 过 让 方法 是 纯 
粹 的 数据 逻辑 而 不 义理 DOM 事件 细节 会 更 好 。 


为 了 解决 这 个 问题 ，Vue.js 为 v-on 提供 两 个 事件 修饰 符 : .prevent 5 
.stop 。 你 是 否 还 记得 修饰 符 是 点 号 打头 的 指使 后 级 ? 


<!-- 阻止 单 击 事 件 冒 泡 --> 


<a v-on:click.stop="doThis"></a> 


<!-- 提交 事件 不 再 重 载 页 面 - -> 
«form v-on:submit.prevent="onSubmit"></form> 


<!-- 修饰 符 可 以 串联 --> 
<a v-on:click.stop.prevent="doThat"> 


<!-- 只 有 修饰 符 --> 


«form v-on:submit.prevent></form> 


按键 修饰 符 


在 监听 键盘 事件 时 ， 我 们 经 常 需要 检测 keyCode。Vue.js 人 允许 为 v-on 添加 按键 
修饰 符 : 


<!-- 只 有 在 keyCode 是 13 时 调用 vm.submit() --> 
«input v-on:keyup.13="submit"> 


记 住所 有 的 keyCode 上 比较 困难 ，Vue.js 为 最 常用 的 按键 提供 别名 : 
<!-- 同上 --> 
«input v-on:keyup.enter="Submit"> 


<!-- 缩写 语法 --> 
<input @keyup.enter="Submit"> 


全 部 的 按键 别名 : 


enter 
tab 
delete 
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另外 1.0.8+ 也 支持 单字 母 按 键 别 名 。 


为 什么 在 HTML 中 监听 事件 ? 


你 可 能 注意 到 这 种 事件 监听 的 方式 违背 了 传统 理念 “separation of concern”, Aw 
担心 ， 因 为 所 有 的 Vue.js 事件 义理 方法 和 表达 式 都 严格 绑 定 在 当前 视图 的 
ViewModel 上 ， 它 不 会 导致 任何 维护 困难 。 实 际 上 ， 使 用 v-on 有 几 个 好 人 处: 


1. 扫 一 眼 HTML 模板 便 能 轻松 定位 在 JavaScript 代码 里 对 应 的 方法 。 


2. 因为 你 无 须 在 JavaScript 里 手动 绑 定 事件 ， 你 的 ViewModel 代码 可 以 是 非常 
纯粹 的 逻辑 ， 和 DOM SEPARA, BAF MIX. 


3. 当 一 个 ViewModel 被 销毁 时 ， 所 有 的 事件 处 理 器 都 会 自动 被 删除 。 你 无 须 担心 
如 何 自己 清理 它们 。 


表单 控件 绑 定 
基础 用 法 


可 以 用 v-model 指 合 在 表单 控件 元 素 上 创建 双向 数据 绑 定 。 根 据 控件 类 型 它 自动 
选取 正确 的 方法 更 新 元 素 。 尽 管 有 点 神奇 ， v-model 不 过 是 语法 糖 ， 在 用 户 输入 
事件 中 更 新 数据 ， 以 及 特别 义理 一 些 极端 例子 。 

Text 


<span>Message is: {{ message }}</span> 
<br> 
<input type="text" v-model="message" placeholder="edit me"> 


Message is: 


Checkbox 
BPA, BHA: 


<input type="checkbox" id="checkbox" v-model="checked"> 
<label for="checkbox">{{ checked }}</label> 


false 


多 个 勾 选 框 ， 绑 定 到 同一 个 数组 : 


<input 
<label 
<input 
<label 
<input 
<label 
<br> 


type="checkbox" id="jack" value="Jack" v-model="checkedName: 
for="jack">Jack</label> 
type="checkbox" id="john" value="John" v-model="checkedName: 
for="john">John</label> 
type="checkbox" id="mike" value="Mike" v-model="checkedName: 
for="mike">Mike</label> 


<span>Checked names: {{ checkedNames &#124; json }}</span> 








Jack O John O Mike 
Checked names: [] 


Radio 


<input 


type="radio" id="one" value="One" v-model="picked"> 


«label for="one">One</label> 


<br> 


<input type="radio" id="two" value="Two" v-model="picked"> 
«label for="two">Two</label> 


<br> 


<span>Picked: {{ picked }}</span> 


One 
Two 
Picked: 


Select 


单 选 : 


<select v-model="Selected"> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
<span>Selected: {{ selected }}</span> 


A v Selected: A 


多 选 ( 绑 定 到 一 个 数组 ) 


<select v-model="selected" multiple> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
<br> 
<span>Selected: {{ selected &#124; json }}</span> 


our 


Selected: [ "A" ] 


动态 选项 ， 用 v-for sex: 


<select v-model="selected"> 
«option v-for="option in options" v-bind:value="option.value"> 
{{ option.text }} 
</option> 
</select> 
<span>Selected: {{ selected }}</span> 


new Vue({ 

elu 

data: { 

selected: 'A', 

options: [ 

{ text: 'One', value: 'A' }, 
( text: 'Two', value: 'B' }, 
( text: 'Three', value: 'C' } 
] 

} 
) 


[One v|Selected: A 
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对 于 单 选 按钮 ， 勾 选 框 及 选择 框 选项 ， v-model 绑 定 的 值 通常 是 静态 字符 串 (对 
于 勾 选 框 是 远 辑 值 ) 


<!-- 当选 中 时 ，`picked ”为 字符 串 "a" --> 
<input type="radio" v-model="picked" value="a"> 


<!-- ‘toggle’ X true x false --> 
<input type="checkbox" v-model="toggle"> 


<!-- 当选 中 时 ， “selected 3B "abc" --> 
<select v-model="selected"> 

<option value="abc">ABC</option> 
</select> 


(AEA ep US Ys EE! Vue 实例 一 个 动态 属性 上 。 可 以 用 v-bind 做 到 。 而 
H v-bind 人 允许 绑 定 输入 框 的 值 到 非 字符 串 值 。 


Checkbox 


<input 
type="checkbox" 
v-model="toggle" 
v-bind: true-value="a 
v-bind: false-value="b"> 


// 选中 

vm.toggle === vm.a 

// 取消 选中 

vm.toggle === vm.b 
Radio 


<input type="radio" v-model="pick" v-bind:value="a"> 


// 选中 
vm.pick === vm.a 


Select Options 


<select v-model="selected"> 

<!-- 对 象 字面 量 --> 

<option v-bind:value="{ number: 123 }">123</option> 
</select> 


// 选中 
typeof vm.selected // -» 'object' 
vm.selected.number // -» 123 


参数 特 ' 


lazy 





"E 


在 默认 情况 下 ， v-model 在 input 事件 中 同步 输入 框 值 与 数据 ， 可 以 添加 一 个 
特性 lazy ， 从 而 改 到 在 change 事件 中 同步 : 


<!-- ff "change" 而 不 是 "input" 事件 中 更 新 --> 
<input v-model="msg" lazy> 


number 


如 果 想 自动 将 用 户 的 输入 保持 为 数字 ， 可 以 添加 一 个 特性 number 


<input v-model="age" number> 


debounce 


debounce 设置 一 个 最 小 的 延 时 ， 在 每 次 山 击 之 后 延 时 同步 输入 框 的 值 与 数据 。 
如 果 每 次 更 新 都 要 进行 高 耗 操作 (例如 在 输入 提示 中 Ajax 请 求 ) ， 它 较为 有 用 。 


<input v-model="msg" debounce="500"> 


edit me 


edit me 


注意 debounce 参数 不 会 延迟 input 事件 : 它 延迟 “宇和 人 "底层 数据 。 因 此 在 使 用 
debounce 时 应 当 用 vm.$watch() 响应 数据 的 变化 。 若 想 延 迟 DOM 事件 ， 应 
当 使 用 debounce 过 滤器 。 


zi 


通过 Vue.js 的 过 渡 系 统 ， 可 以 在 元 素 从 DOM 中 插入 或 移 除 时 自动 应 用 过 渡 效 果 。 
Vue.js 会 在 适当 的 时 机 为 你 触发 CSS 过 渡 或 动画 ， 你 也 可 以 提供 相应 的 
JavaScript 钧 子 范 数 在 过 渡 过 程 中 执行 自 定义 的 DOM 操作 。 


为 了 应 用 过 渡 效 果 ， 需 要 在 目标 元 素 上 使 用 transition 特性 : 


«div v-if="show" transition="my-transition"></div> 


transition 特性 可 以 与 下 面 资 源 一 起 用 : 


v-if 

v-show 

v-for (RH BS AGI m RA R ) 

动态 组 件 (介绍 见 组 件 ) 

在 组 件 的 根 节 点 上 ， 并 且 被 Vue 实例 DOM 方法 (如 vm.$appendTo(el) ) 
触发 。 


当 插 入 或 删除 带 有 过 渡 的 元 素 时 ，Vue 将 : 


1. 尝试 以 ID "my-transition" 查找 JavaScript 过 渡 和 钩子 对 象 一 一 通过 
Vue.transition(id, hooks) 或 transitions 选项 注册 。 如 果 找 到 了 ， 
将 在 过 渡 的 不 同 阶段 调用 相应 的 钩子 。 


2. 自动 噢 探 目标 元 素 是 否 有 CSS 过 渡 或 动画 ， 并 在 合适 时 添加 /删除 CSS 类 
3. 如 果 没 有 找到 JavaScript 钩子 并 且 也 没有 检测 到 CSS 过 渡 / 动 画 ，DOM 操作 
( 揪 入 /删除 ) 在 下 一 帧 中 立即 执行 。 


CSS 过 小 


示例 


«div v-if-"show" transition="expand">hello</div> 


然后 为 .expand-transition , .expand-enter 和 .expand-leave 添加 
CSS 规则 : 


/* 必需 */ 
.expand-transition { 
transition: all .3s ease; 
height: 30px; 
padding: 10px; 
background-color: #eee; 
overflow: hidden; 


j 


/* .expand-enter 定义 进入 的 开始 状态 */ 
/* .expand-leave 定义 离开 的 结束 状态 */ 
.expand-enter, .expand-leave { 


height: 0; 
padding: 0 10px; 
Opacity: 0; 


} 


另外 ， 可 以 提供 JavaScript 钩子 : 


Vue.transition('expand', { 


beforeEnter: function (el) { 


el.textContent = 'beforeEnter' 
H 

enter: function (el) { 
el.textContent - 'enter' 

Hh 

afterEnter: function (el) ( 
el.textContent - 'afterEnter' 
Hh 


enterCancelled: function (el) { 
// handle cancellation 


}, 

beforeLeave: function (el) { 
el.textContent = 'beforeLeave' 
ty 

leave: function (el) { 
el.textContent = 'leave' 

ty 

afterLeave: function (el) { 
el.textContent = 'afterLeave' 
) 


leaveCancelled: function (el) { 
// handle cancellation 


} 
;) 


hello 


Toggle 

过 渡 的 CSS 类 名 

类 名 的 添加 和 切换 取决 于 transition 特性 的 值 。 比 如 transition="fade" , 

会 有 三 个 CSS 类 名 : 

1. .fade-transition 始终 保留 在 元 素 上 。 

2. .fade-enter 定义 进入 过 渡 的 开始 状态 。 只 应 用 一 帧 然后 立即 删除 。 

3. Ed leave 定义 离开 过 渡 的 结束 状态 。 在 离开 过 渡 开 始 时 生效 ， 在 它 结 束 
后 删除 。 


如 果 transition 特性 没有 值 ， 类 名 默认 是 .v-transition , .v-enter 和 
.V-leave , 


过 渡 流 程 详解 


当 show 


属性 改变 时 ，Vue.js 将 相应 地 插入 或 删除 <div> 元素， 按照 如 下 规则 


改变 过 渡 的 CSS 类 名 : 
e 如果 show 变 为 false，Vue.js 将 : 


1. 调用 beforeLeave 4t; 

2. 添加 v-leave 类 名 到 元 素 上 以 触发 过 渡 ; 
3. 调用 leave AT; 

4. 
5 
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等 待 过 渡 结 束 (监听 transitionend 事件 ) ; 


. 从 DOM 中 删除 元 素 并 删除 v-leave 类 名 ; 
. 调用 afterLeave 4f. 


e 如果 show 变 为 tue，Vue.js 将 : 


调用 beforeEnter 4j; 

添加 v-enter 类 名 到 元 素 上 ; 

把 它 插 入 DOM ; 

调用 enter 4j; 

强制 一 次 CSS 布局 ， 让 v-enter 确实 生效 。 然 后 删除 v-enter X 
名 ， 以 触发 过 渡 ， 回 到 元 素 的 原始 状态 ; 

等 待 过 渡 结 


7. 调用 afterEnter 44. 


另外 ， 如 果 在 它 的 进入 过 渡 还 在 进行 中 时 删 除 元 素 ， 将 调用 entercancelled 4 
子 ， 以 清理 变动 或 enter 创建 的 计时 器 。 反 过 来 对 于 离开 过 渡 亦 如 是 。 


上 面 所 有 的 钧 子 函 数 在 调用 时 ， 它 们 的 this 均 指 向 所 属 的 Vue 实例 。 如 果 元 素 
LE 实例 的 根 节 点 ， 则 这 个 实例 是 上 下 文 。 否 则 ， 上 下 文 是 过 渡 指 邻 所 属 的 实 
| 


最 后 ， enter 和 leave 可 以 有 第 二 个 可 选 的 回调 参数 ， 用 于 显 式 控制 过 渡 如 何 
结束 。 因 此 不 必 等 待 CSS transitionend #4, Vue.js 将 等 待 你 手工 调用 这 个 
回调 ， 以 结束 过 渡 。 例 如 : 


enter: function (el) { 

// 没有 第 二 个 参数 

// 由 CSS transitionend 事件 决定 过 渡 何 时 结束 
} 


VS. 


enter: function (el, done) { 
// 有 第 二 个 参数 

// 过 渡 只 有 在 调用 `done ”时 结束 
} 


当 多 个 元 素 一 起 过 渡 时 ， Vue.js 会 批量 处 理 ， 只 强制 一 次 布局 。 


CSS 动 转 


CSS 动画 用 法 同 CSS 过 渡 ， 区 别 是 在 动画 中 v-enter 类 名 在 节点 插入 DOM 后 
会 立即 删除 ， 而 是 在 animationend 事件 触发 时 删除 。 


示例 : (省 略 了 兼容 性 前 级 ) 


«span v-show="Show" transition="bounce">Look at me!</span> 


.bounce-enter { 

animation: bounce-in .5s; 
} 

.bounce-leave { 

animation: bounce-out .5s; 


} 

@keyframes bounce-in { 
0% ( 
transform: scale(0); 
} 
50% { 
transform: scale(1.5); 
} 
100% { 
transform: scale(1); 
} 


@keyframes bounce-out { 
0% ( 

transform: scale(1); 

J 

50% { 

transform: scale(1.5); 
} 

100% { 

transform: scale(0); 


} 
} 


Look at me! 
Toggle 


JavaScript 过 渡 


也 可 以 只 使 用 JavaScript F, PAEL CSS 规则 。 当 只 使 用 JavaScript 过 
渡 时 ， enter 和 leave 钧 子 需要 调用 done 回调， 否则 它们 将 被 同步 调用 ， 
过 渡 将 立即 结 


为 JavaScript 过 渡 显 式 声明 css: false 是 个 好 主意 ，Vue.js 将 跳 过 CSS 检 
测 。 这 样 也 会 阻止 无 意 间 让 CSS 规则 干扰 过 渡 。 


在 下 例 中 我 们 使 用 jQuery 注册 一 个 自 定义 的 JavaScript 过 渡 : 


Vue.transition('fade', { 
css: false, 
enter: function (el, done) { 
// 元 素 已 被 插入 DOM 
// 在 动画 结束 后 调用 done 
$(el) 
.css('opacity', 0) 
.animate(( opacity: 1 }, 1000, done) 
ty 
enterCancelled: function (el) { 
$(el).stop() 


leave: function (el, done) { 

// 与 enter 相同 

$(el).animate(( opacity: © }, 1000, done) 
ty 


leaveCancelled: function (el) { 
$(el).stop() 
} 


;) 


然后 用 transition 特性 中 : 


<p transition="fade"></p> 
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transition 与 v-for 一 起 用 时 可 以 创建 渐 近 过 渡 。 给 过 渡 元 素 添 加 一 个 特性 
stagger , enter-stagger 或 leave-stagger 


<div v-for="list" transition stagger="100"></div> 


或 者 ， 提 供 一 个 钩子 stagger, enter-stagger 或 leave-stagger ， 以 更 好 
的 控制 : 


Vue.transition('stagger', { 
stagger: function (index) { 

// 每 个 过 渡 项 目 增加 50ms Mat 

// 但 是 最 大 延 时 限制 为 300ms 
return Math.min(300, index * 50) 
} 

}) 


示例 : 


Bruce Lee 
Jackie Chan 
Chuck Norris 
Jet Li 

Kung Fury 


html 


<div id="demo"> 
<input v-model="query"> 
<ul> 
<li v-for="item in list filterBy query" 
transition="staggered" 
stagger="100"> 
{{item.msg}} 


</li> 
</ul> 
</div> 
js 
new Vue({ 
el: '#demo', 
data: { 
query: '', 
list: [ 
{ msg: 'Bruce Lee’ }, 
{ msg: 'Jackie Chan' }, 
{ msg: 'Chuck Norris' }, 
{ msg: 'Jet Li' }, 
{ msg: 'Kung Fury' } 
] 
} 
}) 


CSS 


ul { 

padding-left: 0; 

font-family: Helvetica, Arial, sans-serif; 
T 
.staggered-transition { 

transition: all .5s ease; 

overflow: hidden; 

margin: 0; 

height: 20px; 


} 

.Staggered-enter, .staggered-leave { 
Opacity: 0; 
height: 0; 
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使 用 组 件 
注册 
之 前 说 过 ， 我 们 可 以 用 vue.extend() 创建 一 个 组 件 构造 器 : 


var MyComponent = Vue.extend({ 
// 选项 ,,， 


}) 


要 把 这 个 构造 器 用 作 组 件 ， 需 要 用 vue.component(tag, constructor) 注册 


// 全 局 注册 组 件 ，tag 为 my-component 
Vue.component('my-component', MyComponent) 


对 于 自 定 义 标签 名 字 ，Vue.js 不 强制 要 求 遵 循 W3C 规则 (小写 ， 并 且 包 含 一 个 短 
杠 ) ， 尽 管 遵循 这 个 规则 上 比较 好 。 


在 注册 之 后 ， 组 件 便 可 以 用 在 父 实例 的 模块 中 ， 以 自 定义 元 素 <my-component> 
的 形式 使 用 。 要 确保 在 初始 化 根 实例 之 前 注册 了 组 件 : 


<div id="example"> 
<my-component></my-component> 
</div> 


// 定义 
var MyComponent = Vue.extend({ 
template: '<div>A custom component!</div>' 


}) 


// 注册 
Vue.component('my-component', MyComponent) 
// 创建 根 实 例 
new Vue({ 
el: '#example' 


}) 


«div id="example"> 
<div>A custom component !</div> 
</div> 


A custom component! 


注意 组 件 的 模板 替换 了 自 定义 元 素 ， 自 定义 元 素 的 作用 只 是 作为 一 个 挂 载 点 。 这 可 
以 用 实例 选项 replace 改变 。 


局 部 注册 
不 需要 全 局 注册 每 个 组 件 。 可 以 让 组 件 只 能 用 在 其 它 组 件 内 ， 用 实例 选项 


components 注册 : 


var Child = Vue.extend({ /* ... */ }) 


var Parent = Vue.extend({ 
template: '...', 
components: { 
// <my-component> 只 能 用 在 父 组 件 模板 内 
'my-component': Child 
} 
}) 


这 种 封装 也 适用 于 其 它 资源 ， 如 指令 、 过 滤器 和 过 渡 。 


注册 语法 糖 


为 了 让 事件 更 简单 ， 可 以 直接 传人 选项 对 象 而 不 是 构造 器 给 Vue.component() 
和 component 选项 。Vue.js 在 背后 自动 调用 Vue.extend() 


// 在 一 个 步骤 中 扩展 与 注册 
Vue.component('my-component', { 
template: '<div>A custom component!</div>' 


}) 


// 局 部 注册 也 可 以 这 么 做 
var Parent = Vue.extend({ 
components: { 
'my-component': { 
template: '<div>A custom component!</div>' 


} 
} 
}) 


组 件 选 项 问题 


传人 Vue 构造 器 的 多 数 选项 也 可 以 用 在 vue.extend() 中 ， 不 过 有 两 个 特例 : 
data and el 。 试 想 如 果 我 们 简单 地 把 一 个 对 象 作为 data 选项 传 给 
Vue.extend() 


var data = { a: 1 } 

var MyComponent = Vue.extend({ 
data: data 

}) 


这 人 么 做 的 问题 是 MyComponent 所 有 的 实例 将 共享 同一 个 data 对 象 ! 这 基本 不 
是 我 们 想 要 的 ， 因 此 我 们 应 当 使 用 一 个 函数 作为 data 选项 ， 回 数 返 回 一 个 新 对 
象 : 


var MyComponent = Vue.extend({ 
data: function () { 
return { a: 1 } 
} 

}) 


[]38, el 选项 用 在 Vue.extend() 中 时 也 须 是 一 个 函数 。 


is 特性 


一 些 HTML 元 素 ， 如 «table» ， 限 制 什 么 元 素 可 以 放 在 它 里 面 。 自 定义 元 素 不 在 
白 名 单 上 ， 将 被 放 在 元 素 的 外 面 ， 因 而 演 染 不 正确 。 这 时 应 当 使 用 is 特性 ， 指 
示 它 是 一 个 自 定 义 元 素 : 





<table> 
<tr is="my-component"></tr> 
</table> 


Props 


使 用 Props 传递 数据 


组 件 实例 的 作用 域 是 孤立 的 。 这 意味 着 不 能 并 且 不 应 该 在 子 组 件 的 模板 内 直接 引用 
父 组 件 的 数据 。 可 以 使 用 props 把 数据 传 给 子 组 件 。 


“prop” 是 组 件数 据 的 一 个 字段 ， 期 望 从 父 组 件 传 下 来 。 子 组 件 需要 显 式 地 用 
props 选项 声明 props : 


Vue.component('child', { 
// 声明 props 
props: ['msg'], 
// prop 可 以 用 在 模板 内 
// 可 以 用 `this,msg” 设置 
template: '<span>{{ msg }}</span>' 


}) 


然后 向 它 传人 一 个 普通 字符 串 : 


<child msg="hello!"></child> 


结果 : 


hellol 


camelCase vs. kebab-case 


HTML 特性 不 区 分 大 小 写 。 名 字形 式 为 camelCase 的 prop 用 作 特 性 时 ， 需 要 转 为 
kebab-case ( 短 横 线 隔 开 ) 


Vue.component('child', { 
// camelCase in JavaScript 
props: ['myMessage'], 
template: '<span>{{ myMessage }}</span>' 


}) 


<!-- kebab-case in HTML --> 
«child my-message="hello!"></child> 


动态 Props 


类 似 于 绑 定 一 个 普通 的 特性 到 一 个 表达 式 ， 也 可 以 用 v-bind 绑 定 动态 Props 到 
父 组 件 的 数据 。 每 当 父 组 件 的 数据 变化 时 ， 也 会 传导 给 子 组 件 : 


<div> 
<input v-model="parentMsg"> 
<br> 
<child v-bind:my-message="parentMsg"></child> 
</div> 
使 用 v-bind 的 缩写 语法 通常 更 简单 : 


<child :my-message="parentMsg"></child> 
结果 : 


Message from parent 


Message from parent 


字面 量 语法 vs. 动态 语法 
初学 者 常 犯 的 一 个 错误 是 使 用 字面 量 语法 传递 数值 : 


<!- - 传递 了 一 个 字符 串 "1" - -> 
<comp some-prop="1"></comp> 


因为 它 是 一 个 字面 prop， 它 的 值 以 字符 串 "a" 而 不 是 以 实际 的 数字 传 下 去 。 如 
果 想 传递 一 个 实际 的 JavaScript 数字 ， 需 要 使 用 动态 语法 ， 从 而 让 它 的 值 被 当 作 
JavaScript 表达 式 计 算 : 


<!-- 传递 实际 的 数字 - -> 
<comp :some-prop="1"></comp> 


prop 默认 是 单 向 绑 定 : 当 父 组 件 的 属性 变化 时 ， 将 传导 给 子 组 件 ， 但 是 反 过 来 不 
会 。 这 是 为 了 防止 子 组 件 无 意 修 改 了 父 组 件 的 状态 一 一 这 会 让 应 用 的 数据 流 难 以 理 
解 。 不 过 ， 也 可 以 使 用 .sync 或 .once 绑 定 修饰 符 显 式 地 强制 双向 或 单 次 绑 





定 : 
比较 语法 : 


«1-- 默认 为 单 向 绑 定 - -> 
<child :msg="parentMsg"></child> 


<!-- WARE --> 
<child :msg.sync="parentMsg"></child> 


Sie ee ee 
<child :msg.once="parentMsg"></child> 


双向 绑 定 会 把 子 组 件 的 msg 属性 同步 回 父 组 件 的 parentMsg 属性 。 单 次 绑 定 
在 建立 之 后 不 会 同步 之 后 的 变化 。 


注意 如 果 prop 是 一 个 对 象 或 数组 ， 是 按 引 用 传递 。 在 子 组 件 内 修改 它 会 影响 父 组 
件 的 状态 ， 不 管 是 使 用 哪 种 绑 定 类 型 。 
Prop 验证 


组 件 可 以 为 props 指定 验证 要 求 。 当 组 件 给 其 他 人 使 用 时 这 很 有 用 ， 因 为 这 些 验 证 
要 求 构 成 了 组 件 的 API， 确 保 其 他 人 正确 地 使 用 组 件 。 此 时 props 的 值 是 一 个 对 
象 ， 包 含 验证 要 求 : 


Vue.component('example', { 
props: { 
// 基础 类 型 检测 (nu1l1 ”意思 是 任何 类 型 都 可 以 ) 
propA: Number, 
// RASPES 
propB: { 
type: String, 
required: true 


ty 

// 数字 ， 有 默认 值 
propc: { 

type: Number, 
default: 100 


u 

// 对 象 /数组 的 默认 值 应 当 由 一 个 函数 返回 
propD: { 

type: Object, 

default: function () { 
return ( msg: 'hello' } 

} 

u 

// 指定 这 个 prop 为 双向 绑 定 
// 如 果 绑 定 类 型 不 对 将 抛 出 一 条 警告 
propE: { 

twoway: true 


ty 

// 自 定义 验证 图 数 

propF: { 

validator: function (value) { 
return value > 10 


} 


ty 

// 转换 范 数 (1.0.12 新 增 ) 

// 在 设置 值 之 前 转换 值 

propG: { 

coerce: function (val) { 

return val + '' // 将 值 转换 为 字符 串 
} 

} 


} 
}) 
type 可 以 是 下 面 原生 构造 器 : 


String 
Number 
Boolean 
Function 
Object 
Array 


type 也 可 以 是 一 个 自 定 义 构 造 器 ， 使 用 instanceof 检测 。 


当 prop 验证 失败 了 ，Vue 将 拒绝 在 子 组 件 上 设置 此 值 ， 如 果 使 用 的 是 开发 版 本 会 


抛 出 一 条 警告 。 


父子 组 件 通 信 
父 链 


子 组 件 可 以 用 this.$parent 访问 它 的 父 组 件 。 根 实例 的 后 代 可 以 用 
this.$root 访问 它 。 父 组 件 有 一 个 数组 this.$children ， 包 含 它 所 有 的 子 
元 素 。 


尽管 可 以 访问 父 链 上 任意 的 实例 ， 不 过 子 组 件 应 当 避 人 免 直接 依赖 父 组 件 的 数据 ， 应 
"o ps props 传递 数据 。 另 外 ， 在 子 组 件 中 修改 父 组 件 的 状态 是 非常 糟糕 的 
法 ， 因 为 : 


1. 这 让 父 组 件 与 子 组 件 紧 密 地 耦合 ; 
2. 只 看 父 组 件 ， 很 难 理解 父 组 件 的 状态 。 因 为 它 可 能 被 任意 子 组 件 修 改 ! 理想 情 
况 下 ， 只 有 组 件 自己 能 修改 它 的 状态 。 
自 定义 事件 
Vue 实例 实现 了 一 个 自 定义 事件 接口 ， 用 于 在 组 件 树 中 通信 。 这 个 事件 系统 独立 于 
原生 DOM 事件 ， 做 法 也 不 同 。 
每 个 Vue 实例 都 是 一 个 事件 触发 器 : 
。 使 用 $on() 监听 事件 ; 
。 使 用 $emit() 在 它 上 面 触发 事件 ; 
。 使 用 $dispatch() 派发 事件 ， 事 件 治 着 父 链 冒 泡 ; 
。 使 用 $broadcast() 广播 事件 ， 事 件 向 下 传导 给 所 有 的 后 代 。 


不 同 于 DOM 事件 ，Vue 事件 在 冒 泡 过 程 中 第 一 次 触发 回调 之 后 自动 停止 冒 泡 ， 除 
非 回调 明确 返回 true 。 


简单 例子 : 


<!-- 子 组 件 模板 --> 

<template id="child-template"> 

<input v-model="msg"> 

<button v-on:click="notify">Dispatch Event</button> 
</template> 


<!-- 父 组 件 模板 --> 
<div id="events-example"> 
<p>Messages: {{ messages &#124; json }}</p> 
<child></child> 
</div> 


// 注册 子 组 件 
// 将 当前 消息 派发 出 去 
Vue.component('child', { 
template: '#child-template', 
data: function () { 
return { msg: 'hello' } 
ty 
methods: { 
notify: function () ( 
if (this.msg.trim()) { 
this.$dispatch('child-msg', this.msg) 
this.msg = '' 
J 
} 
} 
}) 


// 启动 父 组 件 

// 将 收 到 消息 时 将 事件 推 入 一 个 数组 
var parent = new Vue({ 

el: '#events-example', 
data: { 

messages: [] 


ty 
// 在 创建 实例 时 “events m4 €Hb39FH ^$on^ 
events: { 
'child-msg': function (msg) { 
// 事件 回调 内 的 “this ”自动 绑 定 到 注册 它 的 实例 上 
this.messages.push(msg) 
} 
} 
}) 


Messages: [] 


hello Dispatch Event 


使 用 v-on 绑 定 自 定 义 事件 
上 例 非 常 好 ， 不 过 看 着 父 组 件 的 代码 ， "child-msg" 事件 来 自 哪 里 不 直观 。 如 


果 我 们 在 模板 中 子 组 件 用 到 的 地 方 声 明 事 件 义理 器 会 更 好 。 为 了 做 到 这 点 ， 子 组 件 
可 以 用 v-on 监听 自 定义 事件 : 


«child v-on:child-msg="handleIt"></child> 


这 让 事情 非常 清晰 : 当 子 组 件 触发 了 "child-msg" 事件 ， 父 组 件 的 handleIt 
方法 将 被 调用 。 所 有 影响 父 组 件 状态 的 代码 放 到 父 组 件 的 handlert 方法 中 ; F 
组 件 只 关注 触发 事件 。 
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尽管 有 props 和 events， 但 是 有 时 仍然 需要 在 JavaScript 中 直接 访问 子 组 件 。 为 
此 可 以 使 用 v-ref 为 子 组 件 指定 一 个 索引 ID。 例 如 : 


<div id="parent"> 
<user-profile v-ref:profile></user-profile> 
</div> 


var parent = new Vue({ el: '#parent' }) 
// 访问 子 组 件 
var child = parent.$refs.profile 


v-ref 和 v-for 一 起 用 时 ，ref 是 一 个 数组 或 对 象 ， 包 含 相应 的 子 组 件 。 


使 用 Slot 分 发 内 容 


在 使 用 组 件 时 ， 常 常 要 像 这 样 组 合 它们 : 


<app> 
<app -header></app-header> 
<app-footer></app-footer> 
</app> 


SS oL s 
注意 两 点 : 


1. «app» 组 件 不 知道 它 的 挂 载 点 会 有 什么 内 容 ， 挂 载 点 的 内 容 是 由 «app» 的 
父 组 件 决 定 的 。 


2. «app» 组 件 很 可 能 有 它 自己 的 模板 。 


为 了 让 组 件 可 以 组 合 ， 我 们 需要 一 种 方式 来 混合 父 组 件 的 内 容 与 子 组 件 自己 的 模 
板 。 这 个 处 理 称 为 内 容 分 发 (或 “transclusion”， 如 果 你 熟悉 Angular) 。Vue.js 实 
现 了 一 个 内 容 分 发 API， 参 照 了 当前 Web 组 件 规 范 草 稿 ， 使 用 特殊 的 «slot» 元 
素 作为 原始 内 容 的 插 槽 。 


编译 作用 域 
在 深入 内 容 分 发 API 之 前 ， 我 们 先 明 确 内 容 的 编译 作用 域 。 假 定 模板 为 : 


<child> 


{{ msg }} 
</child> 


msg 应 该 绑 定 到 父 组 件 的 数据 ， 还 是 绑 定 到 子 组 件 的 数据 ? 答案 是 父 组 件 。 组 件 
作用 域 简单 地 说 是 : 


父 组 件 模 板 的 内 容 在 父 组 件 作 用 域内 编译 ; 子 组 件 模板 的 内 容 在 子 组 件 作用 域 


内 编译 
一 个 常见 错误 是 试图 在 父 组 件 模 板 内 将 一 个 指使 绑 定 到 子 组 件 属性 /方法 : 


<!-- FEM --> 
<child v-show="someChildProperty"></child> 


假定 someChildProperty 是 子 组 件 的 属性 ， 上 例 不 能 如 预期 工作 。 父 组 件 模板 
不 知道 子 组 件 的 状态 。 


如 果 要 绑 定子 组 件 内 的 指令 到 一 个 组 件 的 根 节点 ， 应 当 在 它 的 模板 内 这 人 么 做 : 


Vue.component('child-component', { 
// 有 效 ， 因 为 是 在 正确 的 作用 域内 
template: '«div v-show="someChildProperty">Child</div>', 
data: function () { 
return { 
someChildProperty: true 
} 
} 
}) 


类 似 地 ， 分 发 内 容 是 在 父 组 件 作用 域内 编译 。 


单个 Slot 


父 组 件 的 内 容 将 被 抛 奔 ， 除 非 子 组 件 模板 包含 «slot» 。 如 果 只 有 一 个 没有 特性 
的 slot， 整 个 内 容 将 被 插 到 它 所 在 的 地 方 ， 替 换 slot. 


«slot» 标签 的 内 容 视 为 回 退 内 容 。 回 退 内 容 在 子 组 件 的 作用 域内 编译 ， 只 有 当 
宿主 元 素 为 空 并 且 没有 内 容 供 插 和 人 时 显示 。 


假定 my-component 组 件 有 下 面 模板 : 


<div> 

<hi>This is my component !</h1> 

<slot> 

This will only be displayed if there is no content 
to be distributed. 

</slot> 

</div> 


父 组 件 模板 : 


<my -component> 

<p>This is some original content</p> 
<p>This is some more original content</p> 
</my -component> 


<div> 

<hi>This is my component !</h1> 

<p>This is some original content</p> 
<p>This is some more original content</p> 
</div> 


命名 Slot 


«slot» 元 素 有 一 个 特殊 特性 name ， 用 于 配置 如 何 分 发 内 容 。 多 个 slot 可 以 有 
不 同 的 名 字 。 命 名 slot 将 匹配 有 对 应 slot 特性 的 内 容 片 断 。 


也 可 以 有 一 个 未 命名 slot, CHR slot， 作 为 找 不 到 匹配 内 容 的 回 退 插 权 。 如 果 
没有 默认 的 slot， 不 匹配 内 容 将 被 抛弃 。 


例如 ， 假 定 我 们 有 一 个 multi-insertion 组 件 ， 它 的 模板 为 : 


<div> 
<slot name="one"></slot> 
<slot></slot> 
<slot name="two"></slot> 
</div> 
父 组 件 模板 : 


<multi-insertion> 

<p slot="one">One</p> 
<p slot="two">Two</p> 
<p>Default A</p> 
</multi-insertion> 


<div> 

<p slot="one">One</p> 
<p>Default A</p> 

<p slot="two">Two</p> 
</div> 


在 组 合 组 件 时 ， 内 容 分 发 API 是 非常 有 用 的 机 制 。 


动态 组 件 


多 个 组 件 可 以 使 用 同一 个 挂 载 点 ， 然 后 动态 地 在 它们 之 间 切 换 。 使 用 保留 的 
«component» 元 素 ， 动 态 地 绑 定 到 它 的 is 特性 : 


new Vue({ 


el: 'body', 

data: { 

currentView: 'home' 

ty 

components: { 

home susce cur ED. 
posts Sey E 
archiver d orien Fy 
} 
}) 


<component :is="currentView"> 
<!-- 组 件 在 vm.currentview 变化 时 改变 --> 
</component> 


如 果 把 切换 出 去 的 组 件 保 留 在 内 存 中 ， 可 以 保留 它 的 状态 或 避免 重新 泻 染 。 为 此 可 
以 添加 一 个 keep-alive JETER : 


«component :is="currentView" keep-alive> 
<!-- 非 活动 组 件 将 被 缓存 - -> 


</component> 


activate #4 


在 切换 组 件 时 ， 切 入 组 件 在 切入 前 可 能 需要 进行 一 些 异步 操作 。 为 了 控制 组 件 切 换 
时 长 ， 给 切 人 组 件 添 加 activate 44 : 


Vue.component('activate-example', { 
activate: function (done) { 

var self = this 
loadDataAsync(function (data) { 
self.someData = data 

done() 
3) 

} 

}) 
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作用 于 使 用 实例 方法 手工 插入 的 过 程 中 。 


transition-mode 


transition-mode 特性 用 于 指定 两 个 动态 组 件 之 间 如 何 过 渡 。 


在 默认 情况 下 ， 进 入 与 离开 平滑 地 过 渡 。 这 个 特性 可 以 指定 另外 两 种 模式 : 


e in-out :新 组 件 先 过 渡 进 入 ， 等 它 的 过 渡 完成 之 后 当前 组 件 过 渡 出 去 。 


e out-in : 当前 组 件 先 过 渡 出 去 ， 等 它 的 过 渡 完 成 之 后 新 组 件 过 渡 进 入 


示例 : 


<!-- 先 淡出 再 淡 入 - -> 
<component 
:is="view" 
transition="fade" 
transition-mode="out-in"> 
</component> 


.fade-transition { 
transition: opacity .3s ease; 


j 
.fade-enter, .fade-leave { 
opacity: 0; 


SA OB 
Component A 


米 项 


组 件 和 v-for 
自 定义 组 件 可 以 像 普 通 元 素 一 样 直 接 使 用 v-for 


«my-component v-for="item in items"></my-component> 


但 是 ， 不 能 传递 数据 给 组 件 ， 因 为 组 件 的 作用 域 是 孤立 的 。 为 了 传递 数据 给 
应 当 使 用 props : 


<my -component 
v-for="item in items" 
:item="item" 
:index="$index"> 

</my -component> 


o 


组 件 ， 


不 自动 把 item 注入 组 件 的 原因 是 这 会 导致 组 件 跟 当 前 v-for 紧密 耦合 。 显 陈 
声明 数据 来 自 哪 里 可 以 让 组 件 复 用 在 其 它 地 方 。 


编写 可 复 用 组 件 


在 编写 组 件 时 ， 记 住 是 否 要 复 用 组 件 有 好 处 。 一 次 性 组 件 跟 其 它 组 件 紧密 耦合 没 
系 ， 但 是 可 复 用 组 件 应 当 定义 一 个 清晰 的 公开 接口 。 


Vue js 组 件 API 来 自 三 部 分 一 一 prop， 事 件 和 slot : 
e prop 人 允许 外 部 环境 传递 数据 给 组 件 ; 
o 事件 允许 组 件 触 发 外 部 环境 的 action ; 
e slot 人 允许 外 部 环境 插入 内 容 到 组 件 的 视图 结构 内 。 
使 用 v-bind 和 v-on 的 简写 语法 ， 模 板 的 缩 进 清楚 且 简 洁 : 


<my-component 

:foo="baz" 

:bar="qux" 

@event -a="doThis" 

@event -b="doThat"> 

<!-- content --> 

<img slot="icon" src="..."> 

<p slot="main-text">Hello!</p> 
</my -component> 


异步 组 件 


在 大 型 应 用 中 ， 我 们 可 能 需要 将 应 用 拆 分 为 小 块 ， 只 在 需要 时 才 从 服务 器 下 载 。 为 
了 让 事情 更 简单 ，Vue.js 人 允许 将 组 件 定义 为 一 个 工厂 函数 ， 动 态 地 解析 组 件 的 定 
ee eee ee 
再 次 泻 染 。 例 如 : 


Vue.component('async-example', function (resolve, reject) { 
setTimeout(function () { 
resolve({ 
template: '<div>I am async!</div>' 
}) 
}, 1000) 
}) 


工厂 函数 接收 一 个 resolve 回调 ， 在 收 到 从 服务 器 下 载 的 组 件 定义 时 调用 。 也 可 
以 调用 reject(reason) 指示 加 载 失 败 。 这 里 setTimeout 只 是 为 了 演示 。 怎 
么 获取 组 件 完全 由 你 决定 。 推 荐 配合 使 用 Webpack 的 代码 分 割 功能 : 


Vue.component('async-webpack-example', function (resolve) { 
// 这 个 特殊 的 require 语法 告诉 webpack 

// 自动 将 编译 后 的 代码 分 割 成 不 同 的 块 ， 

// 这 些 块 将 通过 ajax 请 求 自动 下 载 。 
require(['./my-async-component'], resolve) 


3) 


资源 命名 约定 


一 些 资源 ， 如 组 件 和 指令 ， 是 以 HTML 特性 或 HTML 自 定 义 元 素 的 形式 出 现在 模 
板 中 。 因 为 HTML 特性 的 名 字 和 标签 的 名 字 不 区 分 大 小 写 ， 所 以 资源 的 名 字 通 常 需 
使 用 kebab-case 而 不 是 camelCase 的 形式 ， 这 不 大 方便 。 


Vue.js 支持 资源 的 名 字 使 用 camelCase 或 PascalCase 的 形式 ， 并 且 在 模板 中 自 
动 将 它们 转 为 kebab-case (类 似 于 prop 的 命名 约定 ) 


// 在 组 件 定义 中 

components: { 

// 使 用 camelCase 形式 注册 
myComponent: { /*... */ } 
j 


<!-- 在 模板 中 使 用 kebab -case 形式 --> 
«my - component></my -component> 


ES6 对 象 字面 量 缩写 也 没 问题 : 


// PascalCase 
import TextBox from './components/text-box'; 
import DropdownMenu from './components/dropdown-menu' ; 


export default { 

components: ( 

// 在 模板 中 写作 «text-box» 和 <dropdown-menu> 
TextBox, 

DropdownMenu 

} 

} 


递归 组 件 


组 件 在 它 的 模板 内 可 以 递归 地 调用 自己 ， 不过， 只 有 当 它 有 name 选项 时 才 可 
以 : 


var StackOverflow = Vue.extend(( 
name: 'stack-overflow', 
template: 
'«div»' + 
// 递归 地 调用 它 自己 
'<stack-overflow></stack-overflow>' + 
'«/div»' 


}) 


上 面 组 件 会 导致 一 个 错误 “max stack size exceeded”， 所 以 要 确保 递归 调用 有 终止 
条 件 。 当 使 用 vue.component() 全 局 注册 一 个 组 件 时 ， 组 件 ID 自动 设置 为 组 件 
的 name 选项 。 


片断 实例 


在 使 用 template 选项 时 ， 模 板 的 内 容 将 替换 实例 的 挂 载 元 素 。 因 而 推荐 模板 的 
顶级 元 素 始终 是 单个 元 素 。 


不 这 么 写 模 板 : 


<div>root node 1</div> 
<div>root node 2</div> 


推荐 这 么 写 : 


<div> 
I have a single root node! 
<div>node 1</div> 
<div>node 2</div> 
</div> 


下 面 几 种 情况 会 让 实例 变 成 一 个 片断 实例 : 


. 模板 包含 多 个 顶级 元 素 。 

. 模板 只 包含 普通 文本 。 

. 模板 只 包含 其 它 组 件 (其 它 组 件 可 能 是 一 个 片段 实例 ) 。 

. 模板 只 包含 一 个 元 素 指 合 ， 如 «partial» 或 vue-router 的 
<router-view> 。 

5. 模板 根 节 点 有 一 个 流程 控制 指令， 如 v-if 或 v-for o 

这 些 情况 让 实例 有 未 知 数 量 的 顶级 元 素 ， 它 将 把 它 的 DOM 内 容 当 作 片 断 。 片 断 实 

例 仍然 会 正确 地 演 染 内 容 。 不 过 ， 它 没有 一 个 根 节 点 ， 它 的 sel 指向 一 个 锚 节 

点 ， 即 一 个 空 的 文本 节点 (在 开发 模式 下 是 一 个 注释 节点 ) 。 


但 是 更 重要 的 是 ， 组 件 元 素 上 的 非 流 程控 制 指 伟 ， 非 prop 特性 和 过 渡 将 被 忽略 ， 
因为 没有 根 元 素 供 绑 定 : 


ROM 一 


<!-- 不 可 以 ， 因 为 没有 根 元 素 --> 
«example v-show="0k" transition="fade"></example> 


<!-- props 可 以 --> 
«example :prop="someData"></example> 


<!-- 流程 控制 可 以 ， 但 是 不 能 有 过 渡 --> 
«example v-if="o0k"></example> 


当然 片断 实例 有 它 的 用 人 处， 不 过 通常 给 组 件 一 个 根 节点 比较 好 。 它 会 保证 组 件 元 素 
上 的 指 信和 特性 能 正确 地 转换 ， 同 时 性 能 也 稍微 好 些 。 


内 联 模板 


如 果子 组 件 有 inline-template 特性 ， 组 件 将 把 它 的 内 容 当 作 它 的 模板 ， 而 不 
是 把 它 当 作 分 发 内 容 。 这 让 模板 更 灵活 。 


<my-component inline-template> 

<p>These are compiled as the component's own template</p> 
<p>Not parent's transclusion content .</p> 

</my -component> 


但 是 inline-template 让 模板 的 作用 域 难 以 理解 ， 并 且 不 能 缓存 模板 编译 结 
果 。 最 佳 实践 是 使 用 template 选项 在 组 件 内 定义 模板 。 


深入 响应 式 原理 


大 部 分 的 基础 内 容 我 们 已 经 讲 到 了 ， 现 在 讲 点 底层 内 容 。Vue.js 最 显著 的 一 个 功能 
是 响应 系统 一 一 模型 只 是 普通 对 象 ， 修 改 它 则 更 新 视图 。 这 让 状态 管理 非常 简单 
且 直 观 ， 不 过 理解 它 的 原理 也 很 重要 ， 可 以 避免 一 些 常 见 问题 。 下 面 我 们 开始 深 控 
Vue.js 响应 系统 的 底层 细节 。 


如 何 追 踪 变 化 


把 一 个 普通 对 象 传 给 Vue 实例 作为 它 的 data 选项 ，Vue.js 将 通 历 它 的 属性 ， 用 
Object.defineProperty 将 它们 转 为 getter/setter。 这 是 ESS 特性 ， 不 能 打 补 丁 实 
现 ， 这 便 是 为 什么 Vue.js 不 支持 IES 及 更 低 版 本 。 


用 户 看 不 到 getter/setters， 但 是 在 内 部 它们 让 Vue.js 追踪 依赖 ， 在 属性 被 访问 和 
修改 时 通知 变化 。 一 个 问题 是 在 浏览 器 控制 台 打 印 数据 对 象 时 getter/setter 的 格式 
化 不 同 ， 使 用 vm.$log() 实例 方法 可 以 得 到 更 友好 的 输出 。 


模板 中 每 个 指使 /数据 绑 定 都 有 一 个 对 应 的 watcher 对 象 ， 在 计算 过 程 中 它 把 属性 
记录 为 依赖 。 之 后 当 依赖 的 setter 被 调用 时 ， 会 触发 watcher 重新 计算 ， 也 就 会 导 
致 它 的 关联 指令 更 新 DOM, 
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变化 检测 问题 


受 ES5 的 限制 ，Vue.js 不 能 检测 到 对 象 属性 的 添加 或 删除 。 因 为 Vue.js 在 初始 化 
实例 时 将 属性 转 为 getter/setter， 所 以 属性 必须 在 data 对 象 上 才能 让 Vue.js 转 
换 它 ， 才 能 让 它 是 响应 的 。 例 如 : 


var data = { a: 1 } 

var vm = new Vue({ 

data: data 

3) 

// ^wm.a^ #1 ^data.a^ 现在 是 响应 的 


vm.b = 2 
// ^wm.b^ 不 是 响应 的 


data.b = 
// `data. = 不 是 响应 的 
， 有 办 法 在 实例 创 | 建 之 后 添加 属性 并 且 让 它 是 响应 的 。 
对 于 Vue 实例 ， 可 以 使 用 $set(key, value) 实例 方法 


vm.$set('b', 2) 
// ^wm.b^ 和 ^data.b'^ 现在 是 响应 的 


对 于 普通 数据 对 象 ， 可 以 使 用 全 局 方法 vue.set(object, key, value) 


Vue.set(data, 'c', 3) 
// ^vwm.c^ #1 ^data.c^ 现在 是 响应 的 


有 时 你 想 向 已 有 对 象 上 添加 一 些 属 例如 使 用 Object.assign() 或 
_.extend() 添加 属性 。 但 是 ， ANI 0 到 对 象 上 的 新 属性 不 会 触发 更 新 。 这 时 可 以 
创建 一 个 新 的 对 象 ， 包谷 原 对 象 的 属性 和 新 的 属性 ， 


// 不 使 用 ^"Object.assign(this.someObject, { a: 1, b: 2 1)^ 
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2. 


J ëO 
也 有 一 些 数组 相关 的 问题 ， 之 前 已 经 在 列表 泻 染 中 讲 过 
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尽管 Vue.js 提供 了 API 动态 地 添加 响应 属性 ， 还 是 推荐 在 data 对 象 上 声明 所 有 
的 响应 属性 。 


不 这 么 做 : 





var vm = new Vue({ 
template: '<div>{{msg}}</div>' 


}) 
// 然后 添加 “msg 
vm.$set('msg', 'Hello!') 


这 么 做 : 


var vm = new Vue({ 


data: { 
// 以 一 个 空 值 声明 ^msg^ 
msg: '' 


template: '<div>{{msg}}</div>' 


}) 
// 然后 设置 “msg 


vm.msg = 'Hello!' 
这 么 做 有 两 个 原因 : 


1. data 对 象 就 像 组 件 状态 的 模式 (schema) 。 在 它 上 面 声 明 所 有 的 属性 让 组 
件 代 码 更 易于 理解 。 


2. 添加 一 个 顶级 响应 属性 会 强制 所 有 的 watcher 重新 计算 ， 因 为 它 之 前 不 存在 ， 
没有 watcher 追踪 它 。 这 么 做 性 能 通常 是 可 以 接受 的 (特别 是 对 比 Angular 的 
脏 检查 ) ， 但 是 可 以 在 初始 化 时 避免 。 


异步 更 新 队列 


Vue.js 默认 异步 更 新 DOM。 每 当 观 察 到 数据 变化 时 ，Vue 就 开始 一 个 队列 ， 将 同 
一 事件 循环 内 所 有 的 数据 变化 缓存 起 来 。 如 果 一 个 watcher 被 多 次 触发 ， 只 会 推 入 
一 次 到 队列 中 。 等 到 下 一 次 事件 循环 ，Vue 将 清空 队列 ， 只 进行 必要 的 DOM 更 
新 。 在 内 部 异步 队列 优先 使 用 Mutationobserver ， 如 果 不 支持 则 使 用 


setTimeout(fn, 0) o 


例如 ， 设 置 了 vm.someData = 'new value' , DOM 不 会 立即 更 新 ， 而 是 在 下 一 
次 事件 循环 清空 队列 时 更 新 。 我 们 基本 不 用 关心 这 个 过 程 ， 但 是 如 果 想 在 DOM 状 
态 更 新 后 做 点 什么 ， 这 会 有 帮助 。 尽 管 Vue.js 鼓励 开发 者 治 着 数据 驱动 的 思路 ， 避 
免 直 接 修改 DOM， 但 是 有 时 确实 要 这 么 做 。 为 了 在 数据 变化 之 后 等 待 Vue.js 完成 
更 新 DOM， 可 以 在 数据 变化 之 后 立即 使 用 vue.nextTick(callback) 。 回 调 在 
DOM 更 新 完成 后 调用 。 例 如 : 


<div id="example">{{msg}}</div> 


var vm = new Vue({ 
el: '#example', 


data: { 

msg: '123' 

} 

}) 
vm.msg = 'new message' // 修改 数据 
vm.$el.textContent === 'new message' // false 
Vue.nextTick(function () { 

vm.$el.textContent === 'new message' // true 
}) 


vm. $nextTick() 这 个 实例 方法 比较 方便 ， 因 为 它 不 需要 全 局 Vue ， 它 的 回调 
的 this 自动 绑 定 到 当前 Vue 实例 : 


Vue.component('example', { 
template: '<span>{{msg}}</span>', 
data: function () { 
return { 
msg: 'not updated' 
} 
}, 
methods: { 
updateMessage: function () { 
this.msg = 'updated' 
console. log(this.$el.textContent) // => 'not updated' 
this.$nextTick(function () { 
console.log(this.$el.textContent) // => 'updated' 
3) 
} 
} 
}) 


计算 属性 的 秘密 


应 注意 到 Vue.js 的 计算 属性 不 是 简单 的 getter。 计 算 属 性 持续 追踪 它 的 响应 依赖 。 
在 计算 一 个 计算 属性 时 ，Vue.js 更 新 它 的 依赖 列表 并 缓存 结果 ， 只 有 当 其 中 一 个 依 
赖 发 生 了 变化 ， 缓 存 的 结果 才 无 效 。 因 此 ， 只 要 依赖 不 发 生变 化 ， 访问 计算 属性 会 
直接 返回 缓存 的 结果 ， 而 不 是 调用 getter. 


为 什么 要 缓存 呢 ? 假设 我 们 有 一 个 高 耗 计 算 属 性 A ， 它 要 通 历 一 个 巨型 数组 并 做 
大 量 的 计算 。 然 后 ， 可 和 有 的 计算 属性 依赖 A 。 如 果 没 有 缓存 ， 我 们 将 调用 
A 的 getter 许多 次 ， 超 过 必要 次 数 。 


由 于 计算 属性 被 缓存 了 ， 在 访问 它 时 getter 不 总 是 被 调用 。 考 虑 下 例 : 


var vm = new Vue({ 


data: { 
msg: 'hi' 
1 

computed: { 


example: function () { 
return Date.now() + this.msg 
} 

} 
}) 


计算 属性 example 只 有 一 个 依赖 : vm.msg 。 Date.now() 不 是 响应 依赖 ， 
因为 它 跟 Vue 的 数据 观察 系统 无 关 。 因 而 ， 在 访问 vm.example WHR wat jg] & 
AH, BRIE vm.msg BT. 


有 时 希望 getter 不 改变 原 有 的 行为 ， 每 次 访问 vm.example 时 都 调用 getter, 3x 
时 可 以 为 指定 的 计算 属性 关闭 缓存 : 


computed: { 

example: { 

cache: false, 

get: function () { 

return Date.now() + this.msg 
} 

} 
} 


现在 每 次 访问 vm.example 时 ， 时 间 惟 都 是 新 的 。 但 是 ， 只 是 在 JavaScript 中 
访问 是 这 样 的 ; 数据 绑 定 仍 是 依赖 驱动 的 。 如 果 在 模块 中 这 样 绑 定 计算 属性 
{{example}} ， 只 有 响应 依赖 发 生变 化 时 才 更 新 DOM, 


自 定义 指令 


基础 


WR T ABIES, Vuejs 也 允许 注册 自 定义 指 伟 。 自 定义 指令 提供 一 种 机 制 将 数据 的 
变化 映射 为 DOM 行为 。 


可 以 用 vue.directive(id, definition) 方法 注册 一 个 全 局 自 定 义 指 令 ， 它 接 
收 两 个 参数 指 合 ID 与 定义 对 象 。 也 可 以 用 组 件 的 directives 选项 注册 一 个 局 
部 自 定 义 指 今 。 


钩子 本 数 
定义 对 象 可 以 提供 几 个 钩子 函数 〈 都 是 可 选 的 ) 
e bind : 只 调用 一 次 ， 在 指 今 第 一 次 绑 定 到 元 素 上 时 调用 。 


e update: 在 bind 之 后 立即 以 初始 值 为 参数 第 一 次 调用 ， 之 后 每 当 绑 定 值 变 
化 时 调用 ， 参 数 为 新 值 与 旧 值 。 


e unbind : 只 调用 一 次 ， 在 指令 从 元 素 上 解 线 时 调用 。 
示例 


Vue.directive('my-directive', { 

bind: function () ( 

// 准备 工作 

// 例如 ， 添 加 事件 处 理 器 或 只 需要 运行 一 次 的 高 耗 任务 
ty 

update: function (newValue, oldValue) { 
// 值 更 新 时 的 工作 

// 也 会 以 初始 值 为 参数 调用 一 

ty 

unbind: function () ( 

// 清理 工作 

// fn, WER bind() 添加 的 事件 监听 器 

} 

}) 


在 注册 之 后 ， 便 可 以 在 Vue.js 模板 中 这 样 用 ( 记 着 添加 前 级 v- ) 


<div v-my-directive-"someValue"&gt;«/div&gt; 


当 只 需要 update 部 数 时 ， 可 以 传 入 一 个 图 数 蔡 代 定义 对 象 : 


Vue.directive('my-directive', function (value) { 
// 这 个 函数 用 作 update() 
}) 


指令 实例 属性 


所 有 的 钩子 函数 冯 被 复制 到 实际 的 指令 对 象 中 ， 钧 子 内 this 指向 这 个 指令 对 
象 。 这 个 对 象 暴露 了 一 些 有 用 的 属性 : 


el: 指令 绑 定 的 元 素 。 

vm: 拥有 该 指令 的 上 下 文 ViewModel。 
expression: 指令 的 表达 式 ， 不 包括 参数 和 过 滤器 。 
arg: 指 今 的 参数 。 

name: 指令 的 名 字 ， 不 包含 前 缀 。 

modifiers: 一 个 对 象 ， 包 含 指 今 的 修饰 符 。 
descriptor: 一 个 对 象 ， 包 含 指令 的 解析 结果 。 


你 应 当 将 这 些 属 性 视 为 只 读 的 ， 不 要 修改 它们 。 你 也 可 以 给 指令 对 象 添加 自 定 义 属 
性 ， 但 是 注意 不 要 覆盖 已 有 的 内 部 属性 。 


示例 : 


«div id="demo" v-demo:hello.a.b="msg"&gt;</divégt; 


Vue.directive('demo', { 
bind: function () { 
console.log('demo bound! ' ) 
ty 
update: function (value) { 
this.el.innerHTML = 
"name - ' + this.name + '<br&gt;' + 


"expression - ' + this.expression + '«br&gt;' + 

‘argument - ' + this.arg + '<br&gt;' + 

'modifiers - ' + JSON.stringify(this.modifiers) + '<br&gt;' + 
'value - ' + value 

} 
}) 


var demo = new Vue({ 
el: '#demo', 


data: { 

msg: 'hello!' 
} 

}) 


结果 


name - demo 

expression - msg 
argument - hello 

modifiers - ("b":true,"a":true) 
value - hello! 


对 象 字面 量 
如 果 指 邻 需要 多 个 值 ， 可 以 传人 一 个 JavaScript 对 象 字 面 量 。 记 住 ， 指 邻 可 以 使 用 
任意 合法 的 JavaScript 表达 式 : 


«div v-demo="{ color: 'white', text: 'hello!' }"&gt;</divégt; 


Vue.directive('demo', function (value) { 
console.log(value.color) // "white" 
console.log(value.text) // "hello!" 


}) 


字面 修饰 符 
当 指 邻 使 用 了 字面 修饰 符 ， 它 的 值 将 按 普 通 字 符 串 义理 并 传递 给 update A 
法 。 update 方法 将 只 调用 一 次 ， 因 为 普通 字符 串 不 能 响应 数据 变化 。 


<div v-demo.literal="foo bar baz"&gt; 


Vue.directive('demo', function (value) { 
console.log(value) // "foo bar baz" 


}) 


TRID 


有 时 我 们 想 以 自 定 义 元 素 的 形式 使 用 指令， 而 不 是 以 特性 的 形式 。 这 和 与 Angular 的 
"E" 指令 非常 相似 。 元 素 指令 可 以 看 做 是 一 个 轻 量 组 件 。 可 以 像 下 面 这 样 注册 一 个 
自 定 义 元 素 指令 : 


Vue.elementDirective('my-directive', { 
// API 同 普通 指 今 
bind: function { 
// 操作 this .el， 
} 
}) 


TARE : 

<div v-my-directive&gt;</div&gt; 
这 样 导 : 

«my -directive&gt;«/my-directive&gt; 


元 素 指令 不 能 接受 参数 或 表达 式 ， 但 是 它 可 以 读 取 元 素 的 特性 从 而 决定 它 的 行为 。 


锭 民 于 普通 指 合 ， 元 素 指 使 是 终结 性 的 ， 这 意味 着 ， 一 旦 Vue 遇 到 一 个 元 素 指 今 ， 
它 将 跳 过 该 元 素 及 其 子 元 素 只 有 该 元 素 指 命 本身 可 以 操作 该 元 素 及 其 子 元 素 。 





params 


自 定义 指使 可 以 接收 一 个 params 数组 ， 指 定 一 个 特性 列表 ，Vue 编译 器 将 自动 
提取 绑 定 元 素 的 这 些 特性 。 例 如 : 


<div v-example a-"hi"&gt;«/div&gt; 


Vue.directive('example', { 

params: ['a'], 

bind: function () { 
console.log(this.params.a) // -&gt; "hi" 
} 


;) 


此 API 也 支持 动态 属性 。 this.params[key] 会 自动 保持 更 新 。 另 外 ， 可 以 指定 
一 个 回调 ， 在 值 变化 时 调用 : 


<div v-example v-bind:a="someValue"&gt;</divégt; 


Vue.directive('example', { 
params: ['a'], 
paramwatchers: { 

a: function (val, oldVal) { 
console.log('a changed! ' ) 


} 
}) 


deep 


如 果 自 定义 指令 用 在 一 个 对 象 上 ， 当 对 象 内 部 属性 变化 时 要 触发 update , WE 
指令 定义 对 象 中 指定 deep: true o 


«div v-my-directive="o0bj"&gt;</div&gt; 


Vue.directive('my-directive', { 
deep: true, 
update: function (obj) { 
// 在 “obj” 的 椒 套 属性 变化 时 调用 
} 

}) 


twoWay 


如 果 指 令 想 向 Vue 实例 写 回 数据 ， 则 在 指令 定义 对 象 中 指定 twoway: true 。 该 
选项 允许 在 指令 中 使 用 this.set(value) : 


Vue.directive('example', { 
twoWay: true, 
bind: function () { 
this.handler = function () { 

// 将 数据 写 回 vm 

// 如 果 指 命 这样 绑 定 v-example="a.b.c" 

// 它 将 用 给 定 值 设 置 `vm.a.b.c. 
this.set(this.el.value) 
}.bind(this) 
this.el.addEventListener('input', this.handler) 
ty 
unbind: function () { 
this.el.removeEventListener('input', this.handler ) 
} 

}) 


acceptStatement 


传人 acceptStatement:true 可 以 让 自 定义 指令 接受 内 联 语句 ， 就 像 v-on BB 
样 : 


«div v-my-directive="at+"&gt ;</div&égt; 


Vue.directive('my-directive', { 
acceptStatement: true, 
update: function (fn) { 
// NE T ERA 
// 在 调用 它 时 将 在 所 属实 例 作 用 域内 计算 "a++" 语句 
} 

}) 


明智 地 使 用 ， 因 为 通常 你 要 在 模板 中 避免 副 效 应 。 


priority 


可 以 给 指使 指定 一 个 优先 级 (默认 是 1000) 。 同 一 个 元 素 上 优先 级 高 的 指令 会 比 
其 它 指 合 处 理 得 早 一 些 。 优 先 级 一 样 的 指 合 按 照 它 在 元 素 特性 列表 中 出 现 的 顺序 依 
次 处 理 ， 但 是 不 能 保证 这 个 顺序 在 不 同 的 浏览 器 中 是 一 致 的 。 


可 以 在 API 中 查看 内 置 指使 的 优先 级 。 另 外 ， 流 程控 制 指 合 v-if 和 v-for 在 
编译 过 程 中 始终 拥有 最 高 的 优先 级 。 


基础 


类 似 于 自 定义 指 舍 ， 可 以 用 全 局 方法 vue.filter() 注册 一 个 自 定 义 过 滤器 ， 它 
接收 两 个 参数 : 过 滤器 ID 和 过 滤器 加 数 。 过 滤器 辑 数 以 值 为 参数 ， 返 回转 换 后 的 
值 : 


Vue.filter('reverse', function (value) { 
return value.split('').reverse().join('') 


}) 


<!-- 'abc' => 'cba' --> 
<span v-text="message &#124; reverse"></span> 


过 滤器 函数 可 以 接收 任意 数量 的 参数 : 


Vue.filter('wrap', function (value, begin, end) ( 
return begin + value + end 


}) 


<!-- 'hello' => 'before hello after' --> 
«span v-text="message &#124; wrap 'before' ‘after'"></span> 


双向 过 滤器 


目前 我 们 使 用 过 滤器 都 是 在 把 来 自 模型 的 值 显 视 在 视图 之 前 转换 它 。 不 过 也 可 以 定 
义 一 个 过 滤器 ， 在 把 来 自视 图 〈 «input» TR) 的 值 写 回 模型 之 前 转化 它 : 


Vue. filter('currencyDisplay', { 
// model -> view 
// 在 更 新 ^"«input»^ 元 素 之 前 格式 化 值 
read: function(val) { 
return '/figure»-val.toFixed(2) 


hy 


// view -> model 

// 在 写 回 数据 之 前 格式 化 值 

write: function(val, oldVal) { 

var number = +val.replace(/[4\d.]/g, '') 

return isNaN(number) ? © : parseFloat(number.toFixed(2)) 
} 
}) 


示例 : 


$123.45 


Model value: 123.45 


动态 参数 


如 果 过 滤器 参数 没有 用 引号 包 起 来 ， 则 它 会 在 当前 vm 作用 域内 动态 计算 。 另外 ， 
过 滤器 函数 的 this 始终 指向 调用 它 的 vm。 例 如: 


<input v-model="userInput"> 
<span>{{msg &#124; concat userInput}}</span> 


Vue.filter('concat', function (value, input) { 


// input === "^this.userInput' 
return value + input 
}) 


上 例 比较 简单 ， 也 可 以 用 表达 式 达 到 相同 的 结果 ， 但 是 对 于 更 复杂 的 逻辑 一 一 需要 
多 于 一 个 语句 ， 这 时 需要 将 它 放 到 计算 属性 或 自 定义 过 滤器 中 。 


内 置 过 滤器 filterBy 和 orderBy ， 根 据 所 属 Vue 实例 的 当前 状态 ， 过 滤 / 排 
序 传 入 的 数组 。 


a 
A 


N^, 
EO 


基础 


混合 以 一 种 灵活 的 方式 为 组 件 提供 分 布 复 用 功能 能 。 混 合 对 象 可 以 包含 任意 的 组 件 选 
项 。 当 组 件 使 用 了 混合 对 象 时 ， 混 合 对 象 的 所 有 选项 将 被 "混入 ”组 件 自己 的 选项 
中 。 


示例 : 


var myMixin = n 
created: function () { 
this.hello() 


ty 

methods: { 

hello: function () { 
console.log('hello from mixin!') 


} 
} 


// 定义 一 个 组 件 ， 使 用 这 个 混合 对 象 
var Component = Vue.extend(( 
mixins: [myMixin] 


}) 


var component = new Component() // -> "hello from mixin!" 


先 项 合并 


当 混合 对 象 与 组 件 包含 同名 选项 时 ， 这 些 选 项 将 以 适当 的 策略 合并 。 例 如 ， 同 名 鸳 
子 范 数 被 并 入 一 个 数组 ， 因 而 都 会 被 调用 。 另 外 ， 混 合 的 钩子 将 在 组 件 自己 的 钓 子 
之 前 调用 。 


var mixin = { 

created: function () { 
console.log('mixin hook called') 
j 

j 


new Vue(( 

mixins: [mixin], 

created: function () { 
console.log('component hook called') 


}) 


// -> "mixin hook called" 
// -> "component hook called" 


值 为 对 象 的 选项 ， 如 methods , components 和 directives 将 合并 到 同一 个 
对 象 内 。 如 果 键 冲突 则 组 件 的 选项 优先 。 


var mixin = { 
methods: { 

foo: function () { 
console.log('foo') 


conflicting: function () (1 
console.log('from mixin' ) 


} 
} 


var vm = new Vue({ 

mixins: [mixin], 

methods: { 

bar: function () { 
console.log('bar') 

ty 

conflicting: function () { 
console.log('from self') 


} 
}) 


vm.foo() // -> "foo" 


vm.bar() // -> "bar" 
vm.conflicting() // -> "from self" 


注意 Vue.extend() 使 用 同样 的 合并 策略 。 


全 局 混合 


也 可 以 全 局 注册 混合 。 小 心 使 用 ! 一 旦 全 局 注册 混合 ， 它 会 影响 所 有 之 后 创建 的 
Vue 实例 。 如 果 使 用 恰当 ， 可 以 为 自 定义 选项 注入 处 理 远 辑 : 


// 为 “my0ption” 自 定义 选项 注入 一 个 处 理 器 
Vue.mixin({ 

created: function () { 

var myOption = this.$options.myOption 
if (myOption) { 

console. log(myOption) 

} 

} 

}) 


new Vue({ 
myOption: 'hello!' 


3) 
// -» "hello!" 


目 定义 选项 合并 策略 


在 合并 自 定义 选项 时 ， 默 认 的 合并 策略 是 简单 地 覆盖 已 有 值 。 如 果 想 用 自 定义 逻辑 
合并 自 定义 选项 ， 则 向 Vue.config.optionMergeStrategies 添加 一 个 加 数 : 


Vue.config.optionMergeStrategies.myOption = function (toVal, fromve 
// 返回 mergedVal 





对 于 多 数值 为 对 象 的 选项 ， 可 以 简单 地 使 用 methods 所 用 的 合并 策略 : 


var strategies = Vue.config.optionMergeStrategies 
strategies.myOption = strategies.methods 


插件 
开发 插件 


插件 通常 会 为 Vue 添加 全 局 功能 。 插 件 的 范围 没有 限制 一 一 通常 是 下 面 几 种 : 
1. 添加 全 局 方法 或 属性 ， 如 vue-element 
2. 添加 全 局 资源 : 指令 /过 滤器 /过 渡 等 ， 如 vue-touch 
3. 添加 Vue 实例 方法 ， 通 过 把 它们 添加 到 Vue.prototype 上 实现 。 
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.一 个 库 ， 提 供 自 己 的 API， 同 时 提供 上 面 提 到 的 一 个 或 多 个 功能 ， 如 vue- 
router 


Vue.js 的 插件 应当 有 一 个 公开 方法 install 。 这 个 方法 的 第 一 个 参数 是 Vue 构 
造 器 ， 第 二 个 参数 是 一 个 可 选 的 选项 对 象 : 


MyPlugin.install = function (Vue, options) { 
// 1\， 添 加 全 局 方法 或 属性 

Vue.myGlobalMethod = 

// 2\， 添 加 全 局 资源 
Vue.directive('my-directive', {}) 

// 3\， 添 加 实例 方法 

Vue.prototype.$myMethod = 


使 用 插件 
通过 Vue.use() 全 局 方法 使 用 插件 : 


// 调用 ~MyPlugin.install(Vue) 
Vue.use(MyPlugin) 


也 可 以 传人 一 个 选项 对 象 : 


Vue.use(MyPlugin, { someOption: true }) 


2 如 vue-router , WR vue 是 全 局 变量 则 自动 调用 Vue.use()。 
过 在 模块 环境 中 应 当 始 终 显 式 调用 vue.use() 


// 通过 Browserify 或 Webpack 使 用 CommonJS 兼容 模块 
var Vue = require('vue' ) 
var VueRouter = require('vue-router' ) 


// 不 要 忘 了 调用 此 方法 
Vue.use(VueRouter ) 


已 有 插件 & 工具 


e vue-router : Vue.js 官方 路 由 。 与 Vue.js 内 核 深度 整合 ， 让 构建 单 页 应 用 易 如 


反 掌 。 
e vue-resource : 通过 XMLHttpRequest 或 JSONP 发 起 请 求 并 处 理 响应 。 
e vue-async-data : 异步 加 载 数据 插件 。 
e vue-validator : 表单 验证 插件 。 
e vue-devtools : Chrome 开发 者 工具 扩展 ， 用 于 调试 Vue.js 应 用 。 
e vue-touch : 使 用 Hammer.js 添加 触摸 手势 指令 (已 过 时 ) o 
e vue-element : 使 用 Vue.js 注册 自 定义 元 素 。 
e 用 户 贡献 的 工具 


构建 大 型 应 用 


Vue.js 的 设计 思想 是 专注 与 灵活 
能 很 好 地 与 已 有 项 目 整合 ， 不 过 对 于 


能 是 一 个 挑战 。 


Vue.js 生态 系统 提供 了 一 系列 的 工具 与 库 ， 用 于 构建 单 页 应 用 。 但 是 它们 只 是 推荐 
而 已 。 


只 是 一 个 界面 库 ， 不 强制 使 用 哪个 架构 。 它 
验 欠 缺 的 开发 者 ， 从 头 开始 构建 大 型 应 用 可 





€ 
经 


模块 化 


对 于 大 型 项 目 ， 为 了 更 好 地 管理 代码 使 用 模块 构建 系统 非常 必要 。 推 荐 代码 使 用 
CommonJS 或 ES6 模块 ， 然 后 使 用 Webpack 或 Browserify 打包 。 


Webpack 和 Browserify 不 只 是 模块 打包 器 。 两 者 都 提供 了 源码 转换 API， 通 过 它 
可 以 用 其 它 预 处 理 器 转换 源码 。 例 如 ， 借 助 babel-loader 或 babelify 代码 可 以 使 用 
ES2015/2016 语法 。 


如 果 你 之 前 没有 用 过 它们 ， 我 强烈 推荐 你 阅读 一 些 教程 ， 了 解 模 块 打 包 器 ， 然 后 使 
用 最 新 的 ECMAScript 特性 写 JavaScript. 


单 文件 组 件 


在 典型 的 Vue.js 项 目 中 ， 我 们 会 把 界面 拆 分 为 多 个 小 组 件 ， 每 个 组 件 在 同一 地 方 封 
装 它 的 CSS 样式 ， 模 板 和 JavaScript 定义 ， 这 么 做 比较 好 。 如 上 所 述 ， 使 用 
Webpack 或 Browserify 以 及 合适 的 源码 转换 器 ， 我 们 可 以 这 样 写 组 件 : 


& my-component.vue 


my-component.vue 


style: 

.my-component h2 { 
red; 

} 

/style: 


template 
div class="my-component"> 
h2>{{msg}}</h2 
div 


</template 


script 


module.exports = { 
a: function () { 


return { 


msg: 'hello!' 


script 





如 果 你 喜欢 预 处 理 器 ， 其 至 可 以 这 么 做 : 


® my-component.vue 


my-component.vue 


<style lang="stylus" 
.my-component 
' red 


/style 


template lang="jade" 
div.my-component 
h1 {{msg}} 
other-component 
template 


Script lang="babel": 
import OtherComponent from './components/other.vue' 


export default { 
Dt 
return { 
msg: 'Hello from ES2015!' 
} 
3; 


components: { 
'other-component': OtherComponent 


} 


/script: 





你 可 以 使 用 Webpack + vue-loader 或 Browserify + vueify 构建 这 些 单 文件 Vue 组 
件 。 推 荐 使 用 Webpack， 因 为 它 的 加 载 器 API 提供 更 好 的 文件 依赖 追踪 /缓存 以 及 
一 些 Browserify 没有 的 转换 功能 。 


在 GitHub 上 有 一 些 构 建 示 例 : 


e Webpack + vue-loader 


e Browserify + vueify 


路 由 


对 于 单 页 应 用 ， 推 荐 使 用 官方 库 vue-router。 详 细 请 查看 它 的 文档 。 


如 果 你 只 需要 非常 简单 的 路 由 逻辑 ， 可 以 这 么 做 ， 监 听 hashchange 事件 并 使 用 
动态 组 件 : 


示例 : 


<div id="app"> 
«component :is="CcurrentView"></component> 


</div> 
Vue.component('home', { /* ... */ }) 
Vue.component('pagei', { /* ... */ Y) 
var app = new Vue({ 

el: '#app', 

data: { 

currentView: 'home' 

} 

}) 

// 在 路 由 义理 器 中 切换 页 面 
app.currentView = 'page1' 


利用 这 种 机 制 也 可 以 非常 容易 地 配合 其 它 路 由 库 ， 如 Page.js sX Director. 


SARS asi ta 


Vue 实例 的 原始 数据 $data 能 直接 用 JSON.stringify() 序列 化 。 社 区 贡献 
了 一 个 插件 vue-resource， 提 供 一 种 容易 的 方式 与 RESTful APIs 配合 。 也 可 以 使 
用 任何 自己 喜欢 的 Ajax E, SU $.ajax 或 SuperAgent。Vue.js 也 能 很 好 地 与 无 
后 端 服务 配合 ， 如 Firebase 和 Parse. 


状态 管理 


在 大 型 应 用 中 ， 状 态 管理 常常 变 得 复杂 ， 因 为 状态 分 散在 许多 组 件 内 。 音 党 忽略 
Vue.js 应 用 的 来 源 是 原生 的 数据 对 象 一 一 Vue 实例 代理 访问 它 。 因 此 ， 如 果 一 个 状 
态 要 被 多 个 实例 共享 ， 应 避免 复制 它 : 


var sourceOfTruth = {} 


var vmA = new Vue({ 
data: sourceOfTruth 


}) 


var vmB = new Vue({ 
data: sourceOfTruth 


}) 


现在 每 当 sourceofTruth 被 修改 后 ， vmA 5 vmB 将 自动 更 新 它们 的 视图 。 
扩展 这 个 思路 ， 我 们 可 以 实现 store 模式 : 


var store = { 


state: { 

message: 'Hello!' 

du 

actionA: function () ( 
this.state.message - 'action A triggered' 
Hh 

actionB: function () ( 
this.state.message - 'action B triggered' 
} 
} 


var vmA = new Vue({ 

data: { 
privateState: {}, 
sharedState: store.state 
} 

}) 


var vmB = new Vue({ 
data: { 
privateState: {}, 
sharedState: store.state 
} 

}) 


我 们 把 所 有 的 action WE store A, action 修改 store 的 状态 。 集 中 管理 状态 更 易 
于 理解 状态 将 怎样 变化 。 组 件 仍然 可 以 拥有 和 管理 它 的 私有 状态 。 
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Notify 
Actions 










Trigger 
Updates 


Component Component 


DE 


有 一 点 要 注意 ， 不 要 在 action 中 蔡 换 原始 的 状态 对 象 一 一 为 了 观察 到 变化 ， 组 件 和 
store 需要 共享 这 个 对 象 。 


如 果 我 们 约定 ， 组 件 不 可 以 直接 修改 store 的 状态 ， 而 应 当 派 发 事件 ， 通 知 store 
执行 action， 那 么 我 们 基本 上 实现 了 Flux 架构 。 此 约定 的 好 处 是 ， 我 们 能 记录 
store 所 有 的 状态 变化 ， 并 且 在 此 之 上 实现 高 级 的 调试 帮助 函数 ， 如 修改 日 志 ， 快 
照 ， 历 史 回 滚 等 。 


Flux 架构 常用 于 React 应 用 中 。 借 助 于 响应 系统 ，Flux 的 核心 思想 能 非常 容易 地 
用 Vuejs 实现 。 注 意 我 们 这 里 的 演示 只 是 为 了 介绍 概念 ， 简 单 的 情况 完全 不 需要 这 
么 做 ， 应 根据 应 用 的 需求 调整 这 个 模式 。 

单元 测试 


任何 支持 模块 构建 系统 的 单元 测试 工具 都 可 以 。 推 荐 使 用 Karma。 它 有 许多 插件 ， 
支持 Webpack 和 Browserify。 用 法 见 它们 的 文档 。 
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代码 测试 的 最 佳 实践 是 导出 组 件 模块 的 选项 /图 数 。 例 如 : 


// my-component.js 

module.exports = { 
template: '<span>{{msg}}</span>', 
data: function () { 


return { 

msg: 'hello!' 
j 

j 


created: function () { 
console.log('my-component created!') 


在 人口 模 块 中 使 用 这 个 模块 : 


// main.js 
var Vue = require('vue' ) 
var app = new Vue({ 
el: '#app', 
data ha m EU 
components: ( 
'my-component': require('./my-component') 
} 
}) 


测试 这 个 模块 : 


// Jasmine 2.0 测试 

describe('my-component', function () { 

// require source module 

var myComponent = require('../src/my-component' ) 
it('should have a created hook', function () { 
expect(typeof myComponent.created).toBe('function' ) 


it('should set correct default data', function () { 
expect(typeof myComponent.data).toBe('function') 
var defaultData = myComponent.data() 
expect(defaultData.msg).toBe('hello!') 

}) 

}) 


因为 Vue.js 指令 是 异步 更 新 ， 如 果 想 在 修改 数据 之 后 修改 DOM, 24 
Vue.nextTick 的 回调 中 操作 。 


生产 发 布 


为 了 更 小 的 文件 体积 ，Vue.js 的 压缩 版 本 删除 所 有 的 警告 ， 但 是 在 使 用 Browserify 
或 Webpack 等 工具 构建 Vue.js SAN, MERE EME, 


Webpack 


使 用 插件 DefinePlugin 将 当前 环境 指定 为 生产 环境 ， 警 告 将 在 UglifyJS 压缩 代码 
过 程 中 被 删除 。 配 置 示例 : 


var webpack = require('webpack' ) 


module.exports = { 

NI Pe 

plugins: [ 

IS a 

new webpack.DefinePlugin({ 
'process.env': { 

NODE ENV: '"production"' 

} 

3); 

new webpack.optimize.UglifyJsPlugin({ 
compress: ( 

warnings: false 

} 

}) 

] 
} 


Browserify 


将 NODE_ENV 设置 为 “production”， 然 后 运行 打包 命 伟 。Vue 会 自动 应 用 envify 
并 让 警告 块 不 能 运行 。 例 如 : 


NODE ENV-production browserify -e main.js &#124; uglifyjs -c -m > I 
网 SS Lr] 





应 用 示例 


Vue.js Hackernews Clone 这 个 应 用 示例 使 用 Webpack + vue-loader 组 织 代 码 ， 使 
用 vue-router 作为 路 由 器 ，HackerNews 官方 的 Firebase API 作为 后 端 。 它 当然 不 
是 大 应用 ， 但 是 它 综合 演示 了 本 页 讨论 的 概念 。 


对 上 比 其 它 框架 


Angular 


选择 


Vue 而 不 选择 Angular， 有 下 面 几 个 原因 ， 当 然 不 是 对 每 个 人 都 适合 : 


在 API 与 设计 两 方面 上 Vue.js 都 比 Angular 简单 得 多 ， 因 此 你 可 以 快速 地 掌 
握 它 的 全 部 特性 并 投入 开发 。 


Vue.js 是 一 个 更 加 灵活 开放 的 解决 方案 。 它 允许 你 以 希望 的 方式 组 织 应 用 程 
序 ， 而 不 是 任何 时 候 都 必须 遵循 Angular 制定 的 规则 。 它 仅仅 是 一 个 视图 层 ， 
所 以 你 可 以 将 它 藤 入 一 个 现 有 页 面 而 不 一 定 要 做 成 一 个 庞大 的 单 页 应 用 。 在 配 
合 其 他 库 方面 它 给 了 你 更 大 的 的 空间 ， 但 相应 ， 你 也 需要 做 更 多 的 架构 决策 。 
例如 ，Vue.js 核心 默认 不 包含 路 由 和 Ajax 功能 ， 并 且 通 常 假定 你 在 应 用 中 使 
用 了 一 个 模块 构建 系统 。 这 可 能 是 最 重要 的 区 别 。 


Angular 使 用 双向 绑 定 ，Vue 也 支持 双向 绑 定 ， 不 过 默认 为 单 向 绑 定 ， 数 据 从 
父 组 件 单 向 传 给 子 组 件 。 在 大 型 应 用 中 使 用 单 向 绑 定 让 数据 流 易于 理解 。 


在 Vue js 中 指令 和 组 件 分 得 更 清晰 。 指 今 只 封装 DOM 操作 ， 而 组 件 代表 一 个 
自给 自足 的 独立 单元 一 一 有 自己 的 视图 和 数据 逻辑 。 在 Angular 中 两 者 有 不 
少 相 混 的 地 方 。 


Vue.js 有 更 好 的 性 能 ， 并 且 非 常 非常 容易 优化 ， 因 为 它 不 使 用 脏 检 查 。 
Angular， 当 watcher 越 来 越 多 时 会 变 得 越 来 越 慢 ， 因 为 作用 域内 的 每 一 次 变 
化 ， 所 有 watcher 都 要 重新 计算 。 并 且 ， 如 果 一 些 watcher 触发 另 一 个 更 新 ， 
脏 检查 循环 (digest cycle) 可 能 要 运行 多 次 。 Angular 用 户 常常 要 使 用 深奥 的 
技术 ， 以 解决 脏 检查 循环 的 问题 。 有 时 没有 简单 的 办 法 来 优化 有 大 量 watcher 
的 作用 域 。Vue.js 则 根本 没有 这 个 问题 ， 因 为 它 使 用 基于 依赖 追踪 的 观察 系统 
并 且 异 步 列 队 更 新 ， 所 有 的 数据 变化 都 是 独立 地 触发 ， 除 非 它们 之 间 有 明确 的 
依赖 关系 。 唯 一 需要 做 的 优化 是 在 v-for 上 使 用 track-by 。 


有 意思 的 是 ，Angular 2 和 Vue 用 相似 的 设计 解决 了 一 些 Angular 1 中 存在 的 问 


是 。 


React 


React.js 和 Vue.js 确实 有 一 些 相似 一 一 它们 都 提供 数据 驱动 、 可 组 合 搭建 的 视图 
组 件 。 当 然 它们 也 有 许多 不 同 。 


首先 ， 内 部 实现 本 质 上 不 同 。React 的 泻 染 建立 在 Virtual DOM 上 





一 种 在 内 存 


中 描述 DOM 树 状态 的 数据 结构 。 当 状态 发 生变 化 时 ，React 重新 泻 染 Virtual 
DOM， 上 比较 计算 之 后 给 真实 DOM 打 补 丁 。 


Virtual DOM 提供 了 一 个 函数 式 的 方法 描述 视图 ， 这 真 的 很 棒 。 因 为 它 不 使 用 数据 
观察 机 制 ， 每 次 更 新 都 会 重新 泻 染 整个 应 用 ， 因 此 从 定义 上 保证 了 视图 与 数据 的 同 
$. Gt FRET JavaScript 同 构 应 用 的 可 能 性 。 


Vue.js 不 使 用 Virtual DOM 而 是 使 用 真实 DOM 作为 模板 ， 数 据 绑 定 到 真实 节点 。 
Vue.js 的 应 用 环境 必须 提供 DOM。 但 是 ， 相 对 于 常见 的 误解 一 Virtual DOM 让 
React 比 其 它 的 都 快 ， Vue.js 实际 上 性 能 比 React 好 ， 而 且 几 乎 不 用 手工 优化 。 而 
React， 为 了 最 优化 的 泻 染 需 要 处 处 实现 shouldComponentUpdate 或 使 用 不 可 
变数 据 结 构 。 


ft API FHM, React (或 JSX) 的 一 个 问题 是 ， 泻 染 辑 数 常常 包含 大 量 的 逻辑 ， 最 
终 看 着 更 像 是 程序 片断 (实际 上 就 是 ) 而 不 是 界面 的 视觉 呈现 。 对 于 部 分 开发 者 来 
说 ， 他 们 可 能 觉得 这 是 个 优点 ， 但 对 那些 像 我 一 样 兼 顾 设 计 和 开发 的 人 来 说 ， 模 板 
能 让 我 们 更 好 地 在 视觉 上 思考 设计 和 CSS。JSX 和 JavaScript 逻辑 的 混合 干扰 了 
我 将 代码 映射 到 设计 的 思维 过 程 。 相 反 ，Vue.js 通过 在 模板 中 加 入 一 个 轻 量 级 的 
DSL (指使 系统 )， 换 来 一 个 依旧 直观 的 模板 ， 且 能 将 远 辑 封装 进 指 倒 和 过 滤器 中 。 


React 的 另 一 个 问题 是 : 由 于 DOM 更 新 完全 交 给 Virtual DOM 管理 ， 当 想 要 自己 
控制 DOM m ELE RRRES (虽然 理论 上 可 以 做 到 ， 但 是 这 样 做 就 本 质 上 违背 了 
React 的 设计 思想 ) 。 如 果 应 用 需要 特别 的 自 定义 DOM 操作 ， 特 别 是 复杂 时 间 控 
制 的 动画 ， 这 个 限制 就 很 讨厌 。 在 这 方面 ，Vue.js 更 灵活 ， 有 许多 用 Vue.js 制作 的 
FWA/Awwwards 获奖 站 点 。 


再 多 说 几 句 : 


e React 团队 雄心 勃勃 ， 计 划 让 React 成 为 通用 平台 的 UL 开发 工具 ， 而 Vue + 
注 于 为 Web 提供 实用 的 解决 方案 。 


e React， 由 于 它 的 函数 式 特质 ， 可 以 很 好 地 使 用 函数 式 编程 模式 。 但 是 对 于 初 
级 开发 者 和 初学 者 这 也 导致 较 大 的 学 习 难 度 。Vue 更 易学 习 并 能 快速 投入 开 
发 。 

对 于 大 型 应 用 ，React 社区 已 经 创造 了 大 量 的 状态 管理 方案 ， 例 如 
Flux/Redux, Vue 本 身 不 解决 这 个 问题 (React 内 核 也 是 ) ， 但 是 可 以 轻松 地 
修改 状态 管理 模式 ， 实 现 一 个 类 似 的 架构 。 我 已 经 看 到 有 用 户 以 Vue 使 用 
Redux, Optimizely 的 工程 病 也 以 Vue 使 用 NuclearJS (他 们 的 Flux 实现 )。 


React 的 开发 趋势 是 将 所 有 东西 都 放 在 JavaScript 中 ， 包 括 CSS。 已 经 有 许 
多 CSS-in-JS 方案 ， 但 是 所 有 的 方案 多 多 少 少 都 有 它 的 问题 。 而 且 更 重要 的 
是 ， 这 么 做 脱离 了 标准 的 CSS 开发 经 验 ， 并 且 很 难 和 CSS 社区 的 已 有 工作 配 
合 。Vue 的 单 文件 组 件 在 把 CSS 封装 到 组 件 模块 的 同时 仍然 允许 你 使 用 你 喜 
欢 的 预 处 理 器 。 





Ember 


Ember 是 一 个 全 能 框架 。 它 提供 大 量 的 约定 ， 一 旦 你 熟悉 了 它们 ， 开 发 会 很 高 效 。 
不 过 ， 这 也 意味 着 学 习 曲 线 较 高 ， 而 且 不 灵活 。 在 框架 和 库 《加 上 一 系列 松散 耦合 
的 工具 ) 之 间 权 衡 选择 。 后 者 更 自由 ， 但 是 也 要 求 你 做 更 多 的 架构 决定 。 


也 就 是 说 ， 最 好 比较 Vue.js AMA Ember 的 模板 与 数据 模型 层 : 


e Vue 在 普通 JavaScript 对 象 上 建立 响应 ， 提 供 自动 化 的 计算 属性 。 在 Ember 
中 需要 将 所 有 东西 放 在 Ember 对 象 内 ， 并 且 手 工 为 计算 属性 声明 依赖 。 


e Vue 的 模板 语法 可 以 用 全 功能 的 JavaScript 表达 式 ， 而 Handlebars 的 语法 和 
帮助 函数 语法 相 比 之 下 非常 受 限 。 


e 在 性 能 上 ，Vue 甩 开 Ember 几 条 街 ， 即 使 是 Ember 2.0 最 新 的 Glimmer 引 
ZÆ, Vue 自动 批量 更 新 ， 在 性 能 比较 关键 时 Ember 要 手工 管理 循环 。 


Polymer 


Polymer 是 另 一 个 由 Google 支持 的 项 目 ， 实 际 上 也 是 Vue.js 的 灵感 来 源 之 一 。 
Vue.js 的 组 件 可 以 类 上 比 为 Polymer 中 的 自 定义 元 素 ， 它 们 提供 类 似 的 开发 体验 。 最 
大 的 不 同 在 于 ，Polymer 依赖 最 新 的 Web 组 件 特 性 ， 在 不 支持 的 浏览 器 中 ， 需 要 
加 载 笨 重 的 polyfill， 性 能 也 会 受到 影响 。 相 对 的 ，Vue.js 无 需 任 何 依赖 ， 最 低 兼容 
到 IE9。 


另外 ， 在 Polymer 1.0 中 ， 为 了 性 能 开发 团队 严格 限制 了 它 的 数据 绑 定 系统 。 例 
如 ，Polymer 模板 支持 的 表达 式 仅 有 退 辑 逆 运 算 和 简单 的 方法 调用 。 它 的 计算 属性 
实现 得 也 不 是 很 灵活 。 


最 后 ， 当 发 布 到 生产 环境 时 ，Polymer 元 素 需 要 用 专用 工具 vulcanizer 打包 。 相 比 
之 下 ， 单 文件 Vue 组 件 能 与 Webpack 无 颖 整合 ， 因 而 你 可 以 轻松 在 组 件 中 使 用 
ES6 及 任意 CSS 预 处 理 器 。 


Riot 


Riot 2.0 提供 类 似 的 基于 组 件 的 开发 模式 (Riot 称 之 为 “标签 ”) ，API 小 而 美 。 我 认 
为 Riot 与 Vue 在 设计 思路 上 有 许多 相同 点 。 不 过 ， 尽 管 比 Riot 重 一 点 ，Vue 提供 
了 一 些 显 著 优 义 : 


真实 的 条 件 泻 染 ，Riot 泻 染 所 有 的 分 支 ， 然 后 简单 地 显示 /隐藏 它们 。 
一 个 强大 得 多 的 路 由 器 ，Riot 的 路 由 API 过 于 简陋 。 

更 成 熟 的 工具 链 支持 ， 见 Webpack + vue-loader。 

过 渡 效 果 系 统 ，Riot 没有 。 

更 佳 的 性 能 。Riot 实际 上 使 用 脏 检查 而 不 是 Virtual DOM， 因 而 遭受 跟 
Angular 一 样 的 性 能 问题 。 


API 


全 局 配置 


Vue.config 是 一 个 对 象 ， 包 含 Vue 的 全 局 配置 。 可 以 在 启动 应 用 之 前 修改 下 面 
属性 : 


debug 
e 类 型 : Boolean 
e 默认 值 : false 


e 用 法 : 


Vue.config.debug = true 


在 调试 模式 中 ，Vue 会 : 
1. 为 所 有 的 警告 打印 栈 追 踪 。 


2. 把 所 有 的 锚 节 点 以 注释 节点 显示 在 DOM 中 ， 更 易于 检查 泻 染 结果 的 结 
构 。 


只 有 开发 版 本 可 以 使 用 调试 模式 。 
delimiters 

e 类 型 : Array<String> 

e 默认 值 . [o dE QA 

e 用 法 : 


// ES6 模板 字符 串 
Vue.config.delimiters = ['${', '}'] 


修改 文本 插值 的 定 界 符 。 


unsafeDelimiters 


e 类 型 : Array<String> 


e 默认 值 : ["{{{"，"}}}"] 
e 用 法 : 


// make it look more dangerous 
Vue.config.unsafeDelimiters = ['{!!', 


1 1 1 } 1 ] 
修改 原生 HTML 插值 的 定 界 符 。 
silent 
e 类 型 : Boolean 
e 默认 值 : false 
e 用 法 : 


Vue.config.silent 


= true 


取消 Vue.js 所 有 的 日 志和 与 警 


警告 
async 
e 类 型 : Boolean 
e 默认 值 : true 
e Hk: 


Vue.config.async - false 


如 果 关 闭 了 异步 模式 ，Vue 在 检测 到 数据 变化 时 同步 更 新 DOM。 在 有 些 情况 
下 这 有 助 于 调试 ， 但 是 也 可 能 导致 性 能 下 降 ， 并 且 影 响 watcher 回调 的 调用 顺 
序 。 async: false 不 推荐 用 在 生产 环境 中 。 


convertAllProperties 
e 类 型 : Boolean 

e 默认 值 : false 

e 用 法 : 


Vue.config.convertAllProperties = 


= true 


1.0.8 添加 。 开 和 启 这 个 选项 后 ，Vue 可 以 转换 和 观察 由 
Object.defineProperty 定义 的 getters/setter。 默 认 关闭 ， 因 为 会 付出 一 
些 性 能 代价 ， 并 且 不 是 常用 功能 。 


全 局 API 


Vue.extend( options ) 


o {Object} options 
e 用 法 : 


创建 基础 Vue 构造 器 的 " 子 类 "。 参 数 是 一 个 对 象 ， 包 含 组 件 选项 。 


这 里 要 注意 的 特例 是 el 和 data 选项 
AW xe ER AC 





在 Vue.extend() 中 它们 必 
«div id="mount -point"></div> 


// 创建 可 复 用 的 构造 器 
var Profile = Vue.extend({ 
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>' 


1) 

// 创建 一 个 Profile 实例 

var profile = new Profile({ 
data: { 

firstName: 'Walter', 
lastName: 'White', 

alias: 'Heisenberg' 


j 


}) 
// 挂 载 到 元 素 上 
profile.$mount('#mount-point' ) 


结果 : 
<p>Walter White aka Heisenberg</p> 
e AM: 组 件 


Vue.nextTick( callback ) 


。 参数 : 


o {Functon} callback 
e 用 法 : 
延迟 回调 在 下 次 DOM 更 新 循环 之 后 执行 。 在 修改 数据 之 后 立即 使 用 这 个 方 
法 ， 等 待 DOM 更 新 。 


// 修改 数据 

vm.msg = 'Hello' 

// DOM 没有 更 新 
Vue.nextTick(function () { 
// DOM 更 新 了 

}) 


e XL: 异步 更 新 队列 


Vue.set( object, key, value ) 


o {Object} object 
o {String} key 
o (*) value 


e。 返回 值 : 设置 的 值 
e 用 法 : 


设置 对 象 的 属性 。 如 果 对 象 是 响应 的 ， 将 触发 视图 更 新 。 这 个 方法 主要 用 于 解 
决 不 能 检测 到 属性 添加 的 限制 。 


e AM: 深入 响应 


Vue.delete( object, key ) 


o {Object} object 
o {String} key 
e 用 法 : 


删除 对 象 的 属性 。 如 果 对 象 是 响应 的 ， 将 触发 视图 更 新 。 这 个 方法 主要 用 于 解 
决 不 能 检测 到 属性 删除 的 限制 。 


eB: 深入 响应 


Vue.directive( id, [definition] ) 


。 参数 : 


o {String} id 
o {Function | Object} [definition] 


e 用 法 : 
注册 或 获取 全 局 指 今 。 


// 注册 
Vue.directive('my-directive', { 
bind: function () 1 
update: function () {}, 
unbind: function () {} 


;) 


// 注册 ， 传 人 一 个 函数 
Vue.directive('my-directive', function () { 
// this will be called as '"update' 


;) 


// getter， 返 回 已 注册 的 指令 
var myDirective = Vue.directive('my-directive' ) 


e XUL: BELED 


Vue.elementDirective( id, [definition] ) 


o {String} id 
o {Object} [definition] 
e 用 法 : 
注册 或 获取 全 局 的 元 素 指 令 。 

// 注册 

Vue.elementDirective('my-element', { 
bind: function () {}, 
// 没有 使 用 "update 
unbind: function () {} 

3) 


// getter， 返 回 已 注册 的 元 素 指 今 
var myDirective = Vue.elementDirective('my-element') 


Vue.filter( id, [definition] ) 


。 参数 : 


o {String} id 
o {Function | Object} [definition] 
e 用 法 : 
注册 或 获取 全 局 过 滤器 。 
// 注册 
Vue. filter('my-filter', function (value) { 


// 返回 义理 后 的 值 
}) 
// 双向 过 滤器 
Vue.filter('my-filter', { 
read: function () {}, 
write: function () {} 


t) 


// getter， 返 回 已 注册 的 指令 
var myFilter = Vue.filter('my-filter') 


e 3: 自 定 义 过 滤器 


Vue.component( id, [definition] ) 


o {String} id 
o {Function | Object} [definition] 
e 用 法 : 


注册 或 获取 全 局 组 件 。 


// 注册 ， 传 入 一 个 扩展 的 构造 器 
Vue.component('my-component', Vue.extend({ /* 


// 注册 ， 传 和 人 一 个 选项 对 象 〈 自 动 调用 Vue.extend) 
Vue.component('my-component', ( /* ... */ Y) 


// 获取 注册 的 组 件 〈 始 终 返 回 构造 器 ) 


var MyComponent = Vue.component( 'my-component ) 


e 另 见 : 组 件 . 


Vue.transition( id, [hooks] ) 


。 参数 : 


=) 


o {String} id 
o {Object} [hooks] 
e 用 法 : 
注册 或 获取 全 局 的 过 渡 钩 子 对 象 。 
// 注册 
Vue.transition('fade', { 


enter: function () {}, 
leave: function () {} 


}) 
获取 注册 的 钩子 
var fadeTransition = Vue.transition('fade' ) 


e AM: 过 渡 . 


Vue.partial( id, [partial] ) 


o {String} id 
o {String} [partial] 
。 Hk: 

注册 或 获取 全 局 的 partial. 


// 注册 
Vue.partial('my-partial', '<div>Hi</div>' ) 


/ 获取 注册 的 partial 
var myPartial = Vue.partial('my-partial') 


见 : 特殊 元 素 - 


Vue.use( plugin, [options] ) 


o {Object | Function) plugin 

o {Object} [options] 

e 用 法 : 
安装 Vue.js PE 如 果 插 件 是 一 个 对 象 ， 必 须 有 一 个 install BA. WR 
它 是 一 个 函数 ， 它 会 被 作为 安装 方法 。 Vus 为 参数 。 


见 : 插件 . 


Vue.mixin( mixin ) 


o {Object} mixin 
。 用 法 : 


全 局 应 用 一 个 混合 ， 将 影响 所 有 Vue 实例 。 插 件 作 者 可 以 用 它 向 组 件 注 入 自 定 
义 逻 辑 。 不 推荐 用 在 应 用 代码 中 。 


e 3: 全 局 混合 
选项 /数据 


data 


e 类 型 : Object | Function 
e 限制 : 在 Vue.extend() 中 只 能 是 函数 。 
e 详细 : 


Vue 实例 的 数据 对 象 。Vue.js AX Hitje & BERE E: A getter/setter, Min 
让 它 能 响应 数据 变化 。 这 个 对 象 必须 是 普通 对 象 : 原生 对 象 ，getter/setter 及 
RRM SHER. 不 推荐 观察 复杂 对 象 。 


在 实例 创建 之 后 ， 可 以 用 vm.$data 访问 原始 数据 对 象 。Vue 实例 也 代理 了 
数据 对 象 所 有 的 属性 。 


名 字 以 或 $ 开始 的 属性 不 会 被 Vue 实例 代理 ， 因 为 它们 可 能 与 Vue 的 
内 置 属性 与 AP| 方法 冲突 。 用 vm.$data. property 访问 它们 。 


可 以 通过 将 vm.$data 传人 JSON.parse(JSON.stringify(...)) 得 到 原 
始 数据 对 象 。 


e 示例 : 


var data = { a: 1 } 


// 直接 创建 一 个 实例 

var vm = new Vue({ 

data: data 

3) 

vm.a // -> 1 

vm.$data --- data // -» true 


// f£ Nue.extend() 中 必须 是 函数 
var Component = Vue.extend({ 
data: function () { 

return { a: 1 } 

} 

}) 


e 另 见 : 深入 响应 . 


props 
e 类 型 : Array | Object 
e 详细 : 
包含 一 些 特性 一 一 期 望 使 用 的 父 组 件数 据 的 属性 。 可 以 是 数组 或 对 象 。 对 和 象 用 





于 高 级 配置 ， 如 类 型 检查 ， 自 定义 验证 ， 默 认 值 等 。 


e 示例 : 


// 简单 语法 
Vue.component('props-demo-simple', { 
props: ['size', 'myMessage' ] 


t) 


// 对 象 语 法 ， 指 定 验证 要 求 
Vue.component('props-demo-advanced', { 
props: 
// 只 检测 类 型 
size: Number, 
// 检测 类 型 + 其 它 验证 
name: { 
type: String, 
required: true 
} 
} 
}) 


e 4%: Props 


computed 
e 类 型 Object 
e 详细: 
实例 计算 属性 。getter 和 setter 的 this 自动 地 绑 定 到 实例 。 
e. 示例 : 
var vm = new Vue({ 
data: (a: 1 }, 
computed: { 
// 仅 读 取 ， 值 只 须 为 函数 


aDouble: function () { 
return this.a * 2 


tr 
// 读 取 和 设置 
aPlus: { 


get: function () { 
return this.a + 1 
}, 

set: function (v) { 
this.a =v - 1 

} 

} 

} 


}) 
vm.aPlus // -> 2 


vm.aPlus = 3 
vm.a // -> 2 
vm.aDouble // -> 4 


e 5h: 
o 计算 属性 
o 深入 响应 : 计算 属性 


methods 
e 类 型 Object 
e 详细 : 


实例 方法 。 实 例 可 以 直接 访问 这 些 方法 ， 也 可 以 用 在 指令 表达 式 内 。 方法 的 
this 自动 绑 定 到 实例 。 


e 示例 : 


var vm = new Vue({ 
data: { a: 1 }, 
methods: { 

plus: function () { 
this.a++ 

} 

} 


}) 
vm.plus() 
vm.a // 2 


: 方法 与 事件 处 理 器 


e 
ag 
= 


watch 
e 类 型 : Object 
e 详细: 


一 个 对 象 ， 键 是 观察 表达 式 ， 值 是 对 应 回调 。 值 也 可 以 是 方法 名 ， 或 者 是 对 
象 ， 包 含 选项 。 在 实例 化 时 为 每 个 键 调用 $watch() 。 


e 示例 : 


var vm = new Vue({ 
data: { 


'a': function (val, oldVal) { 
console.log('new: %s, old: %s', val, oldVal) 
tr 

// 方法 名 

'b': 'someMethod', 

// 深度 watcher 

cur 

handler: function (val, oldVal) { /* ... */ }, 
deep: true 

} 

} 
}) 


vm.a = 2 // -> new: 2, old: 1 
e 3: 实例 方法 - vm.$watch 


选项 /DOM 


el 


类 型 : String | HTMLElement | Function 
限制 : Vue.extend() 内 只 能 是 函数 
详细 : 


为 实例 提供 挂 载 元 素 。 值 可 以 是 CSS 选择 符 ， 或 实际 HTML 元 素 ， 或 返回 
HTML 元 素 的 函数 。 注 意 元 素 只 用 作 挂 载 点 。 如 果 提 供 了 模板 则 元 素 被 替换 ， 
除非 replace 为 false。 元 素 可 以 用 vm.$el 访问 。 


用 在 vue.extend 中 必须 是 画 数 值 ， 这 样 所 有 实例 不 会 共享 元 素 。 


如 果 在 初始 化 时 指定 了 这 个 选项 ， 实 例 将 立即 进入 编译 过 程 。 否 则 ， 需 要 调用 
vm.$mount() ， 手 动 开 始 编译 。 


另 见 : 生命 周期 图 示 


template 


e 类 型 : String 


e 详细 : 


实例 模板 。 模 板 默 认 蔡 换 挂 载 元素 。 如 果 replace 选项 为 false ， 模 板 将 
插入 挂 载 元 素 内 。 两 种 情况 下 ， 挂 载 元 素 的 内 容 都 将 被 忽略 ， 除 非 模板 有 内 容 
分 发 slot. 


如 果 值 以 # 开始 ， 则 它 用 作 选 项 符 ， 将 使 用 匹配 元 素 的 innerHTML 作为 模 
板 。 常 用 的 技巧 是 用 <script type="x-template"> 包含 模板 。 


注意 在 一 些 情况 下 ， 例 如 如 模板 包含 多 个 顶级 元 素 ， 或 只 包含 普通 文本 ， 实 例 
将 变 成 一 个 片断 实例 ， 管 理 多 个 节点 而 不 是 一 个 节点 。 片 断 实例 的 挂 载 元 素 上 
的 非 流程 控制 指令 被 忽略 。 


e 5h: 


o 生命 周期 图 示 
o 使 用 slot 分 发 内 容 
o 片断 实例 


replace 


e 类 型 Boolean 
e 默认 值 true 
e 限制 : 只 能 与 template 选项 一 起 用 


e 详细: 


决定 是 否 蔡 换 模板 的 挂 载 元 素 。 如 果 设 为 false 模板 将 履 盖 元 素 的 内 容 ， 不 
会 替换 元 素 本 身 。 


e 示例 : 


<div id="replace"></div> 


new Vue({ 
el: '#replace', 
template: '<p>replaced</p>' 


t) 


结果 : 


<p>replaced</p> 


replace iW false 


<div id="insert"></div> 


new Vue({ 

el: '#insert', 

replace: false, 

template: '<p>inserted</p>' 


}) 

结果 : 
<div id="insert"> 
<p>inserted</p> 
</div> 


xt oh | 生命 周期 钩子 


created 
e XH!: Function 


e 详细 : 


在 实例 创建 之 后 同步 调用 。 此 时 实例 已 经 结束 解析 选项 ， 这 意味 着 已 建立 : 数 
据 绑 定 ， 计 算 属性 ， 方 法 ，watcher/ 事 件 回调 。 但 是 还 没有 开始 DOM 编 
it, $el 还 不 存在 。 


e 另 见 : 生命 周期 图 示 


beforeCompile 
e 类 型 : Function 
e 详细 : 
在 编译 开始 前 调用 。 
e 3: 生命 周期 图 示 


compiled 
e 类 型 : Function 
e 详细 : 


在 编译 结束 后 调用 。 此 时 所 有 的 指令 已 生效 ， 因 而 数据 的 变化 将 触发 DOM 更 
新 。 但 是 不 担保 $el 已 插入 文档 。 


e 另 见 : 生命 周期 图 示 


ready 
e 类 型 : Function 
e 详细: 


在 编译 结束 和 Sel 第 一 次 插入 文档 之 后 调用 ， 如 在 第 一 次 attached AT 
之 后 调用 。 注 意 必须 是 由 Vue 插入 (如 vm.$appendTo() 等 方法 或 指令 
新 ) FARA ready 4T. 


e Zl: 生命 周期 图 示 
attached 
e 类 型 : Function 


e 详细: 


在 vm.$el 插入 DOM 时 调用 。 必 须 是 由 指令 或 实例 方法 〈 如 
$appendTo() ) 插入 ， 直 接 操作 vm.$el 不 会 触发 这 个 钩子 。 


detached 


e 类 型 : Function 

e 详细 : 
在 vm.$el M DOM 中 删除 时 调用 。 必 须 是 由 指令 或 实例 方法 删除 ， 直 接 操 
VF vm.$el 不 会 触发 这 个 钩子 。 

beforeDestroy 

e 类 型 : Function 

e 详细 : 
在 开始 销毁 实例 时 调用 。 此 时 实例 仍然 有 功能 。 


e 另 见 : 生命 周期 图 示 


destroyed 
e 类 型 : Function 
e 详细 : 
在 实例 被 销毁 之 后 调用 。 此 时 所 有 的 绑 定 和 实例 的 指令 已 经 解 缚 ， 所 有 的 子 实 
例 也 已 经 被 销毁 。 
如 果 有 离开 过 渡 ， destroyed 钧 子 在 过 渡 完 成 之 后 调用 。 


e 另 见 : 生命 周期 图 示 
选项 /资源 


directives 
e 类 型 Object 
e 详细 : 
一 个 对 象 ， 包 含 指 今 。 
e 5h: 
o HELS 
o 资源 命名 约定 
elementDirectives 


e 类 型 Object 


e iti: 
一 个 对 象 ， 包 含 元 素 指 今 。 


e 5h: 


filters 
e 类 型 : Object 
e 详细 : 
一 个 对 象 ， 包 含 过 滤器 。 


e 5h: 


components 


e 类 型 : Object 


e iti: 
— 7] xt RR, 包含 组 件 。 
e 5h: 
o 组 件 
transitions 


e 类 型 : Object 
e 详细 : 
一 个 对 象 ， 包 含 过渡 。 
e 5: 
o 过 渡 
partials 
e 类 型 : Object 


e 详细 : 


一 个 对 象 ， 包 含 partial。 
e 另 见 : 
o 特殊 元 素 - partial 


选项 / ZR AH 


parent 
e 类 型 : vue 实例 
e 详细: 


指定 实例 的 父 实 例 ， 在 两 者 之 间 建 立 父 子 关 系 。 子 实例 可 以 用 
this.$parent 访问 父 实例 ， 子 实例 被 推 入 父 实例 的 $children 数组 中 。 


e AN: 父子 组 件 通 信 


events 
e 类 型 : Object 
e 详细 : 
一 个 对 象 ， 键 是 监听 的 事件 ， 值 是 相应 的 回调 。 注 意 这 些 事件 是 Vue 事件 而 不 


是 DOM 事件 。 值 也 可 以 是 方法 的 名 字 。 在 实例 化 的 过 程 中 ，Vue 实例 会 调用 
对 象 的 每 个 键 。 


e 示例 : 


var vm = new Vue({ 

events: { 

"hook:created': function () { 
console.log('created!') 


greeting: function (msg) { 
console.log(msg) 


tr 
// 也 可 以 是 方法 的 名 字 
bye: 'sayGoodbye' 


methods: { 

sayGoodbye: function () { 
console.log('goodbye!') 

} 

} 

)) // -> created! 
vm.$emit('greeting', 'hi!') // -> hi! 
vm.$emit('bye') // -> goodbye! 


e 5h: 


o 实例 方法 - 事件 
o 父子 组 件 通 BR 


mixins 
e 类 型 : Array 
e 详细 : 


一 个 数组 ， 2 m 这 些 混合 对 象 可 以 像 普 通 实例 对 象 一 样 包含 实例 选 
项 ， 它 们 将 合并 成 一 个 最 终 选 项 对 象 ， 合 并 策略 同 vue.extend() 。 比 如 ， 
如 果 混合 对 象 包含 = created 44, BHABShHAS—t, m4) T ERZX 
都 会 被 调用 。 


混合 后 的 钩子 按 它 们 出 现 顺序 调用 ， 并 且 是 在 调用 组 件 自己 的 钩子 之 前 调用 。 


e 示例 : 


var mixin = { 

created: function () { console.log(1) } 
j 

var vm = new Vue({ 

created: function () ( console.log(2) }, 
mixins: [mixin] 


e 5: 混合 
name 
e 类 型 : String 
e 限制 : 只 能 用 在 Vue.extend() 中 。 
e 详细 : 


允许 组 件 在 它 的 模板 内 递 为 地 调用 它 自己 。 注 意 如 果 组 件 是 由 
Vue.component() 全 局 注册 ， 全 局 ID 自动 作为 它 的 名 字 。 


指定 name 选项 的 另 一 个 好 处 是 方便 检查 。 当 在 控制 台 检 查 组 件 时 ， 默 认 的 
构造 器 名 字 是 VueComponent ， 不 大 有 用 。 在 向 vue.extend() 传人 
name 选项 后 ， 可 以 知道 正在 检查 哪个 组 件 。 值 会 被 转换 为 驼峰 形式 ， 并 用 
作 组 件 构造 器 的 名 字 。 
e 示例 : 
var Ctor = Vue.extend({ 
name: 'stack-overflow', 
template: 
'<div>' + 
// 递归 地 调用 自己 
"<stack-overflow></stack-overflow>' + 
'</div>' 


t) 


// 将 导致 错误 : Maximum call stack size exceeded 
// 不 过 我 们 假定 没 问题 . . ， 
var vm = new Ctor() 


console.log(vm) // -> StackOverflow {$el: null, ...} 


实例 属性 


vm.$data 
e 类 型 : Object 
e 详细 : 
Vue 实例 观察 的 数据 对 象 。 可 以 用 一 个 新 的 对 象 替 换 。 实 例 代理 了 它 的 数据 对 
象 的 属性 。 


vm.$el 


e 类 型 : HTMLElement 
e Hi 


e 详细: 


Vue 实例 的 挂 载 元 素 。 注 意 对 于 片段 实例 ， vm.$el 返回 一 个 锚 节 点 ， 指 示 


片断 的 开始 位 置 。 


vm.$options 
e XH: Object 
e Rik 
e 详细 : 
当前 实例 的 初始 化 选项 。 在 选项 中 包含 自 定义 属性 时 有 用 处 : 
new Vue({ 


customOption: 'foo', 
created: function () ( 


console.log(this.$options.customOption) // -> 'foo' 


} 
t) 


vm.$parent 
e XH: vue 实例 
e Hii 
e 详细 : 
父 实例 ， 如 果 当 前 实例 有 的 话 。 
vm.$root 
e 类 型 : vue 实例 


@ Riz 


e 详细 : 


当前 组 件 树 的 根 Vue 实例 。 如 果 当 前 实例 没有 父 实 例 ， 值 将 是 它 自身 。 


vm.$children 


e 类 型 : Array<Vue instance> 


当前 实例 的 直接 子 组 件 。 


vm.$refs 
e 类 型 Object 
e 只 读 
e 详细 : 
一 个 对 象 ， 包 含 注册 有 v-ref 的 子 组 件 。 


e 5h: 
o 子 组 件 索 引 
o v-ref 
vm.$els 


e 类 型 : Object 
e 只 读 
e 详细 : 


一 个 对 象 ， 包 含 注 册 有 v-el 的 DOM 元 素 。 


e 另 见 : V-el。 
实例 方法 / 数据 


vm.$watch( expOrFn, callback, [options] ) 


。 参数 : 


o {String|Function} expOrFn 
o (Function) callback 
o {Object} [options] 
m {Boolean} deep 
m {Boolean} immediate 
e 返回 值 : {Function} unwatch 


e 用 法 : 


观察 Vue 实例 的 一 个 表达 式 或 计算 函数 。 回 调 的 参数 为 新 值 和 旧 值 。 表 达 式 可 
以 是 某 个 键 路 径 或 任意 合法 绑 定 表达 式 。 


注意 : 在 修改 (不 是 替换 ) 对 象 或 数组 时 ， 旧 值 将 与 新 值 相同 ， 因 为 它们 索引 同一 
个 对 象 /数组 。Vue 不 会 保留 修改 之 前 值 的 副本 。 


e 示例 : 


// RRE 

vm.$watch('a.b.c', function (newVal, oldVal) { 
// 做 点 什么 

}) 


// 表达 式 

vm.$watch('a + b', function (newVal, oldVal) { 
// 做 点 什么 

}) 


// KB 
vm. $watch( 

function () { 

return this.a + this.b 


3 
function (newVal, oldVal) { 


// 做 点 什么 
j 
) 


vm.$watch 3E[B| — T BUB ae al, ARELA A EA : 


var unwatch - vm.$watch('a', cb) 
// 之 后 取消 观察 
unwatch( ) 


e Option: deep 


为 了 发 现 对 象 内 部 值 的 变化 ， 可 以 在 选项 参数 中 指定 deep: true. tek 
听 数 组 的 变动 不 需要 这 么 做 。 


vm.$watch('someObject', callback, { 
deep: true 


t) 


vm.someObject.nestedValue = 123 
// 触发 回调 


e Option: immediate 
在 选项 参数 中 指定 immediate: true 将 立即 以 表达 式 的 当前 值 触发 回调 : 


vm.$watch('a', callback, { 
immediate: true 


}) 
// 立即 以 `a ”的 当前 值 触发 回调 


vm.$get( expression ) 


。 参数 : 


o {String} expression 


。 用 法 
从 Vue 实例 获取 指定 表达 式 的 值 。 如 果 表 达 式 抛 出 错误 ， 则 取消 错误 并 返回 


undefined 。 
e 示例 : 


var vm = new Vue({ 
data: { 


vm.$set( keypath, value ) 


。 参数 : 


o (String) keypath 
o (*) value 


e 用 法 : 


设置 Vue 实例 的 属性 值 。 多 数 情 况 下 应 当 使 用 普通 对 象 语法 ， 如 
vm.a.b = 123 。 这 个 方法 只 用 于 下 面 情况 : 


1. 使 用 keypath 动态 地 设置 属性 。 
2. 设置 不 存在 的 属性 。 


如 果 keypath 不 存在 ， 将 北 为 地 创建 并 建立 追踪 。 如 果 用 它 创建 一 个 顶级 属 
ME, Se PS Rae rill zt A“ digest 循环"， 在 此 过 程 中 重新 计算 所 有 的 watcher. 


e 示例 : 


var vm = new Vue({ 
data: { 

at { 

b: 1 


// keypath 存在 
vm.$set('a.b', 2) 
vm.a.b // -> 2 
// keypath 不 存在 
vm.$set('c', 3) 
vm.c // -> 


e 93: 深入 响应 


vm.$delete( key ) 


。 参数 : 


o {String} key 
。 Hk: 


删除 Vue 实例 (以 及 它 的 $data ) 上 的 顶级 属性 。 强 制 digest 循环 ， 不 推 
荐 使 用 。 


vm.$eval( expression ) 


。 参数 : 


o {String} expression 


e 用 法 : 
计算 当前 实例 上 的 合法 的 绑 定 表达 式 。 表 达 式 也 可 以 包含 过 滤器 。 


e 示例 : 


// 假定 vm.msg = 'hello' 
vm.$eval('msg &#124; uppercase') // -> 'HELLO' 


vm.$interpolate( templateString ) 


。 参数 : 


o {String} templateString 


e 用 法 : 


计算 模板 ， 模 板 包 含 Mustache 标签 。 注 意 这 个 方法 只 是 简单 计算 插值 ， 模 板 
内 的 指令 将 被 忽略 。 


e 示例 : 


// 假定 vm.msg = 'hello' 
vm.$interpolate('{{msg}} world!') // -> 'hello world!' 


vm.$log( [keypath] ) 


。 参数 : 


o {String} [keypath] 
e 用 法 : 


打印 当前 实例 的 数据 ， 比 起 一 堆 getter/setter 要 友好 。keypath 可 选 。 


vm.$log() // 打印 整个 ViewModel 的 数据 
vm.$log('item') // 打印 vm.item 


实例 属性 / 事件 


vm.$on( event, callback ) 


。 参数 : 


o {String} event 
o {Function} callback 
e 用 法 : 
监听 当前 实例 上 的 自 定义 事件 。 事 件 可 以 由 vm.$emit , vm.$dispatch 或 
vm.$broadcast 触发 。 传 人 这 些 方法 的 附加 参数 都 会 传人 这 个 方法 的 回调 。 


e 示例 : 


vm.$on('test', function (msg) { 
console. log(msg) 

19 

vm.$emit('test', 'hi') 

// 53 LU RR 


vm.$once( event, callback ) 


o {String} event 
o {Function} callback 


e 用 法 : 
监听 一 个 自 定义 事件 ， 但 是 只 触发 一 次 ， 在 第 一 次 触发 之 后 删除 监听 器 。 


vm.$off( [event, callback] ) 


。 参数 : 


o {String} [event] 
o {Function} [callback] 
e 用 法 : 


删除 事件 监听 器 。 
o 如 果 没 有 参数 ， 则 删除 所 有 的 事件 监听 器 ; 
o 如 果 只 提供 了 事件 ， 则 删除 这 个 事件 所 有 的 监听 器 ; 
o 如 果 同 时 提供 了 事件 与 回调 ， 则 只 删除 这 个 回调 。 


vm.$emit( event, [...args] ) 
。 参数 : 


o {String} event 


o [...args] 
触发 当前 实例 上 的 事件 。 附 加 参数 都 会 传 给 监听 器 回调 。 


vm.$dispatch( event, [...args] ) 


。 参数 : 


o {String} event 
o [...args] 


。 用 法 


派发 事件 ， 首 先 在 实例 上 触发 它 ， 然 后 治 着 父 链 向 上 冒 泡 在 触发 一 个 监听 器 后 
停止 ， 除 非 它 返 回 true 。 附 加 参数 都 会 传 给 监听 器 回调 。 


e 示例 : 


// 创建 父 链 
var parent 
var child1 
var child2 


new Vue() 
new Vue(( parent: parent }) 
new Vue({ parent: child1 }) 


parent.$on('test', function () { 
console.log('parent notified') 


}) 
child1.$on('test', function () { 
console.log('child1 notified' ) 


}) 
child2.$on('test', function () ( 
console.log('child2 notified' ) 


t) 


child2.$dispatch('test') 
// -» "child2 notified" 
// -> "child1 notified" 
// 没有 通知 parent, AA childi 的 回调 没有 返回 true 


e AN: 父子 组 件 通信 


vm.$broadcast( event, [...args] ) 


。 参数 : 


o {String} event 
o [...args] 
e Hk: 
广播 事件 ， 通 知 给 当前 实例 的 全 部 后 代 。 因 为 后 代 有 多 个 梳 权 ， 事 件 将 治 
各 "路径" 通知 。 每 条 路 径 上 的 通知 在 触发 一 个 监听 器 后 停止 ， 除 非 它 返回 


true 。 


e 示例 : 


var parent = new Vue() 

// childi 和 child2 是 兄弟 

var childi = new Vue({ parent: parent }) 
var child2 = new Vue({ parent: parent }) 
// child3 ft child2 W 

var child3 = new Vue({ parent: child2 }) 


childi.$on('test', function () { 
console.log('child1 notified') 


}) 
child2.$on('test', function () ( 
console.log('child2 notified' ) 


}) 
child3.$on('test', function () ( 
console.log('child3 notified' ) 


t) 


parent.$broadcast('test' ) 

// -> "childi notified" 

// -» "child2 notified" 

// 没有 通知 child3, Az child2 的 回调 没有 返回 true 


实例 方法 /DOM 


vm.$appendTo( elementOrSelector, [callback] ) 


。 参数 : 


o {Element|String} elementOrSelector 
o {Function} [callback] 
e 返回 值 : vm 实例 自身 


e 用 法 : 


将 实例 的 DOM 元 素 或 片断 插入 目标 元 素 内 。 第 一 个 参数 可 以 是 一 个 元 素 或 选 
择 器 字符 串 。 如 果 有 过 渡 则 鲁 发 过 渡 。 回 调 在 过 渡 完成 后 执行 ， 如 果 没 有 触发 
过 渡 则 立即 执行 。 





vm.$before( elementOrSelector, [callback] ) 


。 参数 : 


o {Element|String} elementOrSelector 
o (Function) [callback] 
e 返回 值 : vm 实例 自身 


e。 用 法 : 





将 实例 的 DOM 元 素 或 片断 插 到 目标 元 素 的 前 面 。 第 一 个 参数 可 以 是 一 个 元 素 
或 选择 器 字符 串 。 如 果 有 过 渡 则 触发 过 渡 。 回 调 在 过 渡 完成 后 执行 ， 如 果 没 有 
触发 过 渡 则 立即 执行 。 


vm.$after( elementOrSelector, [callback] ) 
。 参数 : 


o {Element|String} elementOrSelector 
o {Function} [callback] 
e 返回 值 : vm 实例 自身 


e 用 法 : 


将 实例 的 DOM 元 素 或 片断 插 到 目标 元 素 的 后 面 。 第 一 个 参数 可 以 是 一 个 元 素 
或 选择 器 字符 串 。 如 果 有 过 渡 则 触发 过 渡 。 回 调 在 过 渡 完成 后 执行 ， 如 果 没 有 
触发 过 i3 vu] 立即 执行 。 





vm.$remove( [callback] ) 





。 参数 : 

o {Function} [callback] 
e 返回 值 : vm 实例 自身 
e 用 法 : 


从 DOM 中 删除 实例 的 DOM 元 素 或 片断 。 如 果 有 过 渡 则 触发 过 渡 。 回 调 在 过 
渡 完 成 后 执行 ， 如 果 没 有 触发 过 才 渡 则 立即 执行 。 


vm.$nextTick( callback ) 
。 参数 : 


o {Function} [callback] 
e 用 法 : 


将 回调 延迟 到 下 次 DOM 更 新 循环 之 后 执行 。 在 修改 数据 之 后 立即 使 用 它 ， 然 
后 等 待 DOM 更 新 。 它 跟 全 局 方法 vue.nextTick 一样， 不同 的 是 回调 的 
this 自动 绑 定 到 调用 它 的 实例 上 


e 示例 : 


new Vue({ 

OA 

methods: { 

OA 

example: function () { 
// 修改 数据 

this.message = 'changed' 
// DOM 还 没有 更 新 
this.$nextTick(function () { 
// DOM 现在 更 新 了 

// “this” 绑 定 到 当前 实例 
this .doSomethingElse() 
3) 

} 

} 

}) 


e 5h: 


o Vue.nextTick 
o 异步 更 新 队列 


实例 方法 / 生命 周期 


vm.$mount( [elementOrSelector] ) 





。 参数 : 

o {Element|String} [elementOrSelector ] 
e 返回 值 : vm 实例 自身 
e Hk: 


如 果 Vue 实例 在 实例 化 时 没有 收 到 el 选项 ， 则 它 处 于 “未 挂 载 " 状 态 。 没 有 
关联 的 DOM 元 素 或 片断 。 可 以 使 用 vm.$mount() 手动 地 开始 挂 裁 /编译 未 
挂 载 的 实例 。 


如 果 没 有 参数 ， 模 板 将 被 创建 为 文档 之 外 的 的 片断 ， 需 要 手工 用 其 它 的 DOM 
实例 方法 把 它 插入 文档 中 。 如 果 replace 选项 为 false ， 则 自动 创建 一 个 
空 «div» ， 作 为 包装 元 素 。 


在 已 经 挂 载 的 实例 上 调用 $mount() 没有 效果 。 这 个 方法 返回 实例 自身 ， 
而 可 以 链 式 调用 其 它 实例 方法 。 


e 示例 : 


var MyComponent = Vue.extend({ 
template: '<div>Hello!</div>' 


t) 


// 创建 并 挂 裁 到 #app (会 替换 #app) 
new MyComponent().$mount('#app' ) 


// 同上 
new MyComponent({ el: '#app' }) 


// 手动 挂 载 
new MyComponent().$mount().$appendTo('#container' ) 


e ZH: 生命 周期 图 示 


vm.$destroy( [remove] ) 


。 参数 : 


o {Boolean} [remove] - default: false 


e 用 法 : 


完全 销毁 实例 。 清 理 它 与 其 它 实 例 的 连接 ， 解 绑 它 的 全 部 指令 及 事件 监听 器 ， 
如 果 remove 参数 是 true ， 则 从 DOM 中 删除 它 关 联 的 DOM 元 素 或 片 
HIT. 


触发 beforeDestroy 和 destroyed 44. 


e. 另 见 : 生命 周期 图 示 


V-text 
e 类 型 : String 
e 详细 : 
更 新 元 素 的 textContent o 


在 内 部 ， {{ Mustache }} 插值 也 被 编译 为 textNode 的 一 个 v-text 指 
今 。 这 个 指 今 需要 一 个 包装 元 素 ， 不 过 性 能 稍 好 并 且 避 免 FOUC (Flash of 
Uncompiled Content) 。 


e 示例 : 


<span v-text="msg"></span> 
<!-- same as --> 
<span>{{msg}}</span> 


v-html 
e 类 型 : string 
e 详细 : 


更 新 元 素 的 innerHTML 。 内 容 按 普通 HTML 搬入 一 数据 绑 定 被 忽略 。 如 果 
想 复 用 模板 片断 ， 应 当 使 用 partials。 


在 内 部 ， {1{{ Mustache }}} 插值 也 会 被 编译 为 锚 节 点 上 的 一 个 v-html 
指令 。 这 个 指令 需要 一 个 包 妆 元 素 ， 不 过 性 能 稍 好 并 且 避 免 FOUC (Flash of 
Uncompiled Content) 。 


在 网 站 上 动态 演 染 任意 HTML 是 非常 危险 的 ， 因 为 容易 导致 XSS 攻击 。 只 在 
可 信和 内容 上 使 用 v-html ， 永 不 用 在 用 户 提交 的 内 容 上 。 


e 示例 : 


<div v-html="html"></div> 
<!-- 相同 --> 
<div>{{{htm1}}}</div> 


v-if 
e 类 型 : * 
e 用 法 : 


根据 表达 式 的 值 的 真 假 条 件 泻 染 元 素 。 在 切换 时 元 素 及 它 的 数据 绑 定 / 组 件 被 
销毁 并 重建 。 如 果 元 素 是 <template> ， 将 提出 它 的 内 容 作 为 条 件 块 。 


e A: KHER 


v-show 
e XN: E 
e 用 法 : 
根据 表达 式 的 值 的 真 假 切换 元 素 的 display CSS 属性 ， 如 果 有 过 渡 将 触发 


Bo 


e ZW: 条 件 泻 染 - v-show 


v-else 


e 不 需要 表达 式 
e 限制 : 前 一 兄弟 元 素 必 须 有 v-if 或 v-show 。 
e 用 法 : 


为 v-if 和 v-show 添加 “else 块 ”。 


<div v-if="Math.random() > 0.5"> 
Sorry 

</div> 

<div v-else> 

Not sorry 

</div> 


e 另 见 : 条 件 泻 染 v-else 


v-for 
e 类 型 : Array | Object | Number | String 


e Param Attributes: 


o track-by 

o stagger 

o enter-stagger 

o leave-stagger 
。 Hk: 


基于 源 数 据 将 元 素 或 模板 块 重复 数 次 。 表 达 式 必须 使 用 特定 语法 ， 为 当前 通 历 
的 元 素 提供 别名 : 


<div v-for="item in items"> 
{{ item.text }} 
</div> 


另外 也 可 以 为 数组 索引 指定 别名 (如 果 值 是 对 象 可 以 为 键 指 定 别名 ) 


<div v-for="(index, item) in items"></div> 
<div v-for="(key, val) in object"></div> 


e 另 见 : WHER 


e Hit: @ 

e 类 型 : Function | Inline Statement 
e 人 参数: event (required) 

e 修饰 符 : 


o .stop -调用 event.stopPropagation() o 

o „prevent -调用 event.preventDefault() o 

o .{keyCode | keyAlias) -只 在 指定 按键 上 触发 回调 。 
。 用 法 : 


绑 定 事件 监听 器 。 事 件 类 型 由 参数 指定 。 表 达 式 可 以 是 一 个 方法 的 名 字 或 一 个 
内 联 语句 ， 如 果 没 有 修饰 符 也 可 以 省 略 。 


用 在 普通 元 素 上 时 ， 只 能 监听 原生 DOM 事件 。 用 在 自 定义 元 素 组 件 上 时 ， 也 
可 以 监听 子 组 件 触发 的 自 定义 事件 。 


在 监听 原生 DOM 事件 时 ， 方 法 以 事件 为 唯一 的 参数 。 如 果 使 用 内 联 语句 ， 语 
名 可 以 访问 一 个 $event 属性 : 
v-on:click="handle('ok', $event)" , 


1.0.114 在 监听 自 定义 事件 时 ， 内 联 语句 可 以 访问 一 个 $arguments 属性 ， 
它 是 一 个 数组 ， 包 含 传 给 子 组 件 的 $emit 回调 的 参数 。 


e 示例 : 


«1-- 方法 义理 器 --> 
«button v-on:click="doThis"></button> 


<!-- 内 联 语句 --> 
<button v-on:click="doThat('hello', $event)"></button> 


<!-- 缩写 --> 
<button @click="doThis"></button> 


<!-- 停止 冒 泡 --> 
<button @click.stop="doThis"></button> 


<!-- 阻止 默认 行为 - -> 
<button @click.prevent="doThis"></button> 


<!-- 阻止 默认 行为 ， 没 有 表达 式 --> 
<form @submit .prevent></form> 


«1-- 串联 修饰 符 - -> 
<button @click.stop.prevent="doThis"></button> 


<!-- 键 修饰 符 ， 键 别名 --> 
<input @keyup.enter="onEnter"> 


<!-- 键 修饰 符 ， 键 代码 --> 
<input @keyup.13="onEnter"> 


ET ee Nee ie Qd eee 
器 i 


<my-component @my-event="handleThis"></my-component> 


<!-- 内 联 语句 --> 
«my-component @my-event="handleThis(123, $arguments)"»«/my-com[ 


|| Eu O S 





e X: 方法 与 事件 义理 器 


e 类 型 : * (with argument) | Object (without argument) 


e 人 参数: attrOrProp (optional) 


o „sync - 双向 绑 定 ， 只 能 用 于 prop HE. 


o „once - 单 次 绑 定 ， 只 能 用 于 prop HE. 
e 用 法 : 


动态 地 绑 定 一 个 或 多 个 attribute， 或 一 个 组 件 prop 到 表达 式 。 

TRE class 或 style 时 ， 支 持 其 它 类 型 的 值 ， 如 数组 或 对 象 。 

在 绑 定 prop 时 ，prop 必须 在 子 组 件 中 声明 。 可 以 用 修饰 符 指定 不 同 的 绑 定 类 
型 。 


没有 参数 时 ， 可 以 绑 定 到 一 个 对 象 。 注 意 此 时 class 和 style 绑 定 不 支 
持 数 组 和 对 象 。 


。 示例 : 
<!-- E attribute --> 
<img v-bind:src="imageSrc"> 


<!-- 缩写 --> 

«img :src="imageSrc"> 

<!-- ARE class --> 

<div :class="{ red: isRed }"></div> 

<div :class="[classA, classB]"></div> 

<!-- AGE style --> 

«div :style="{ fontSize: size + 'px' }"></div> 
<div :style="[styleObjectA, styleObjectB]"></div> 


«1-- 绑 定 到 一 个 对 象 - -> 
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> 


<!-- prop #8, "prop" 必须 在 my-component 组 件 内 声明 --> 
«my-component :prop="SomeThing"></my -component> 


<!-- 双向 prop RE --> 
«my-component :prop.sync="someThing"></my -component> 


<!-- à prop HE --> 
«my-component :prop.once-"someThing"»«/my-component» 


加 
e 5h: 


o Class 和 Style Zt 3E 
o #444 Props 


v-model 


e 类 型 : 随 表单 控件 类 型 不 同 而 不 同 。 


限制 : 


o «input» 

o «select» 

o <textarea> 
Param Attributes: 


o lazy 

o number 

o debounce 
用 法 : 


在 表单 控件 上 创建 双向 绑 定 。 


3: 表单 控件 绑 定 


v-ref 


限制 : 子 组 件 
参数 : id (required) 
用 法 : 


在 父 组 件 上 注册 一 个 子 组 件 的 索引 ， 便 于 直接 访问 。 不 需要 表达 式 。 必 须 提 供 
参数 id。 可 以 通过 父 组 件 的 $refs 对 象 访问 子 组 件 。 


在 和 v-for 一 起 用 时 ， 注 册 的 值 将 是 一 个 数组 ， 包 含 所 有 的 子 组 件 ， 对 应 于 
绑 定 数组 。 如 果 v-for 用 在 一 个 对 象 上 ， 注 册 的 值 将 是 一 个 对 象 ， 包 含 所 有 
的 子 组 件 ， 对 应 于 绑 定 对 象 。 


Ee , 
ER: 


因为 HTML 不 区 分 大 小 写 ，camelCase 名 字 比 如 v-ref:someRef 将 全 转 为 
小 写 。 可 以 用 v-ref:some-ref 设置 this.$els.someRef , 


示例 : 


<Comp v-ref:child></comp> 
<Comp v-ref:some-child></comp> 


// 从 父 组 件 访问 
this.$refs.child 
this.$refs.someChild 


使 用 v-for 


<comp v-ref:list v-for="item in list"></comp> 


// 值 是 一 个 数组 
this.$refs.list 


e 5: FARSI 


v-el 
e 不 需要 表达 式 
。 参 数 : id (必需 
e Hk: 
为 DOM 元 素 注册 一 个 索引 ， 方 便 通 过 所 属实 例 的 sels 访问 这 个 元 素 。 
。 注意 : 


因为 HTML 不 区 分 大 小 写 ，camelCase 名 字 比 如 v-el:someE1 将 转 为 全 小 
EB, ALARA v-el:some-el 设置 this.$els.someEl 。 


e 示例 : 


<span v-el:msg>hello</span> 
<span v-el:other-msg>wor1ld</span> 


this.$els.msg.textContent // -> "hello" 
this.$els.otherMsg.textContent // -» "world" 


v-pre 
e 不 需要 表达 式 
e 用 法 : 


跳 过 编译 这 个 元 素 和 它 的 子 元 素 。 可 以 用 来 显示 原始 Mustache 标签 。 跳 过 大 
量 没 有 指令 的 节点 会 加 快 编译 。 


e 示例 : 


<span v-pre>{{ this will not be compiled }}</span> 


v-cloak 
e 不 需要 表达 式 
。 用 法 : 
这 个 指令 保持 在 元 素 上 直到 关联 实例 结束 编译 。 和 CSS 规则 如 
[v-cloak] { display: none ) 一 起 用 时 ， 这 个 指使 可 以 隐藏 未 编译 的 
Mustache 标签 直到 实例 准 各 完毕 。 


e 示例 : 


[v-cloak] { 
display: none; 


<div v-cloak> 


{{ message }} 
</div> 


<div> 不 会 显示 ， 直 到 编译 结 


特殊 元 素 


component 


e 特性 : 
o is 
e 用 法 : 
另 一 种 调用 组 件 的 语法 。 主 要 是 和 is 特性 一 起 用 于 动态 组 件 。 


<!-- 动态 组 件 --> 
<!-- 由 实例 的 “componentId” 属 性 控制 - -> 
«component :is="componentId"></component> 


e 另 见 : 动态 组 件 


slot 
e 特性: 


o name 


e 用 法 : 
«slot» 元 素 作为 组 件 模板 之 中 的 内 容 分 发 插 槽 。 这 个 元 素 自身 将 被 替换 。 


有 name 特性 的 slot 称 为 命名 slot. A slot 特性 的 内 容 将 分 发 到 名 字 相 
匹配 的 命名 slot。 


e AL: 使 用 slot 分 发 内 容 


partial 
。 特 性 : 


(0) name 
e 用 法 : 


«partial» 元 素 是 已 注册 的 partial MH, partial 在 插入 时 被 Vue 编译 。 
«partial» 元 素 本 身 会 被 替换 。 «partial» 元 素 需 要 指定 name 特性 。 


e 示例 : 


// 注册 partial 
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>') 


Re = 


<!-- 静态 partial --> 
<partial name="my-partial"></partial> 


<!-- 动态 partial --> 
<!-- je} partial, id === vm.partialld --> 
«partial v-bind:name="partialId"></partial> 


<!-- 动态 partial, 使 用 v-bind 缩写 语法 --> 
«partial :name="partialId"></partial> 


capitalize 
e 示例 : 


{{ msg &#124; capitalize }} 


‘abc’ => ‘Abc’ 


uppercase 
e. 示例 : 
{{ msg &#124; uppercase }} 
‘abc’ => ‘ABC’ 
lowercase 
e. 示例 : 


{{ msg &#124; lowercase }} 
‘ABC’ => ‘abc’ 


currency 


。 参数 : 


o {String} [symbol] - default: '$' 
e 示例: 


{{ amount &#124; currency }} 


12345 => $12,345.00 
使 用 其 它 符号 : 


{{ amount &#124; currency '£' }} 


12345 => £ 12,345.00 


pluralize 


。 参数 : 
o {String} single, [double, triple, ...] 
e 用 法 : 


如 果 只 有 一 个 参数 ， 复 数 形式 只 是 简单 地 在 末尾 添加 一 个 “s"。 如 果 有 多 个 参 
数 ， 参 数 被 当 作 一 个 字符 串 数 组 ， 对 应 一 个 、 两 个 、 三 个 ... 复 数 词 。 如 果 值 的 
个 数 多 于 参数 的 个 数 ， 多 出 的 使 用 最 后 一 个 参数 。 


e 示例 : 


{{count}} {{count &#124; pluralize 'item'}} 


1 => ‘1 item’ 2 => ‘2 items’ 


{{date}}{{date &#124; pluralize 'st' 'nd' 'rd' 'th'}} 


结果 : 
1 => ‘1st? 2 => ‘2nd’ 3 => ‘3rd’ 4 => ‘4th’ 5 => ‘Sth’ 


o {Number} [indent] - 默认 值 2 
e 用 法 : 


输出 经 JSON.stringify() 处 理 后 的 结果 ， 而 不 是 输出 tostring() 的 结 
果 (如 [object Object] ) 。 


e 示例 : 
以 四 个 空格 的 缩 进 打印 一 个 对 象 : 


<pre>{{ nestedObject &#124; json 4 }}</pre> 


debounce 
e 限制 : 指 邻 的 值 须 是 函数 ， 如 v-on 
e 参数 : 


o {Number} [wait] - 默认 值 : 300 
e 用 法 : 


包装 处 理 器 ， 让 它 延 迟 执行 x ms, 默认 延迟 300ms。 包 装 后 的 处 理 器 在 调 
用 之 后 至 少将 延迟 x ms, 如 果 在 延迟 结束 前 再 次 调用 ， 延 迟 时 长 重 置 为 
x mse 


e 示例 : 


<input @keyup="onKeyup &#124; debounce 500"> 


limitBy 
e 限制 : 指使 的 值 须 是 数组 ， 如 v-for 
e 27 : 


o (Number) limit 
o (Number) [offset] 
e 用 法 : 


限制 数组 为 开始 N 个 元 素 ，N 由 第 一 个 参数 指定 。 第 二 个 参数 是 可 选 的 ， 指 定 
开始 的 偏 移 量 。 
<!-- 只 显示 开始 10 个 元 素 --> 


<div v-for="item in items &#124; limitBy 10"></div> 


<!-- 显示 第 5 到 15 元 素 --> 
<div v-for="item in items &#124; limitBy 10 5"></div> 


filterBy 


e 限制 : 指使 的 值 须 是 数组 ， 如 v-for 
e 27 : 


o (String | Function) targetStringOrFunction 
o "in" (optional delimiter) 
o {String} [...searchKeys] 

e 用 法 : 


返回 过 滤 后 的 数组 。 第 一 个 参数 可 以 是 字符 串 或 函数 。 
如 果 第 一 个 参数 是 字符 串 ， 则 在 每 个 数组 元 素 中 搜索 它 : 


«div v-for="item in items &#124; filterBy 'hello'"> 


在 上 例 中 ， 只 显示 包含 字符 串 "hello" 的 元 素 。 


如 果 item 是 一 个 对 象 ， 过 滤器 将 北 为 地 在 它 所 有 属性 中 搜索 。 为 了 缩小 搜索 
范围 ， 可 以 指定 一 个 搜索 字段 : 


«div v-for="user in users &#124; filterBy 'Jack' in 'name'"> 


在 上 例 中 ， 过 滤器 只 在 用 户 对 象 的 name 属性 中 搜索 "Jack" 。 为 了 更 好 的 
性 能 ， 最 好 始终 限制 搜索 范围 。 


上 例 使 用 静态 参数 ， 当 然 可 以 使 用 动态 参数 作为 搜索 目标 或 搜索 字段 。 配 合 


v-model 我 们 可 以 轻松 实现 输入 提示 效果 : 


e A 


<div id="filter-by-example"> 
<input v-model="name"> 


<ul> 


«li v-for="user in users &#124; filterBy name in 'name'"> 


{{ user.name }} 
</li> 

</ul> 
</div> 


new Vue({ 


el: '#filter-by-example', 


data: { 

name: '', 

users: [ 

{ name: 'Bruce' }, 
{ name: 'Chuck' }, 


{ name: 'Jackie' } 


] 
} 
t) 


o Bruce 
o Chuck 
o Jackie 


一 个 示例 : 


多 搜索 字段 : 


BE 
多 搜索 字段 为 一 个 动态 数组 : 


图 


<li v-for="user in users &#124; filterBy searchText in 'name' ' 


<!-- fields = [’fieldA’, 





<div v-for="user in users &#124; filterBy searchText in fields" 





Catetanetatata"el 
ZR | 





使 用 自 定义 过 滤 函 数 : 


<div v-for="user in users &#124; filterBy myCustomFilterFunctic 








‘| 





orderBy 
e 限制 : 指令 的 值 须 是 数组 ， 如 v-for 


。 参数 : 


o {String} sortKey 
o {String} [order] - Rite: 1 
e 用 法 : 


返回 排序 后 的 数组 。 sortkey 是 用 于 排序 的 字段 。 可 选 参数 order REA 
RHF ( order >= 0 ) 或 降序 (order < 0 ) 。 


对 于 原始 类 型 数组 ， sortKey 可 以 是 任意 的 真 值 。 


e 示例 : 


<ul> 

<li v-for="user in users &#124; orderBy 'name'"> 
{{ user.name }} 

</li> 
</ul> 


降序 : 


<ul> 

«li v-for="user in users &#124; orderBy 'name' -1"> 
{{ user.name }} 

</li> 

</ul> 


原始 类 型 数组 : 


<ul> 

<li v-for="n in numbers &#124; orderBy true"> 
{in }} 

</li> 

</ul> 


动态 排序 : 


<div id="orderby-example"> 
<button @click="order = order * -1">Reverse Sort Order</buttor 
<ul> 
<li v-for="user in users &#124; orderBy 'name' order"> 
{{ user.name }} 
</li> 
</ul> 
</div> 


3i = 








new Vue({ 

el: '#orderby-example', 

data: { 

order: 1, 

users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' 
J 

}) 


n —— 





| Reverse Sort Order 


o Bruce 
o Chuck 
o Jackie 


示例 


Markdown 2444.25 Example 


极 简 的 Markdown 编辑 器 。 


a hello 


html 


<div id="editor"> 
<textarea v-model="input" debounce="300"></textarea> 
<div v-html="input | marked"></div> 

</div> 


js 


new Vue({ 
el: '#editor', 
data: { 
input: '# hello' 
tr 
filters: { 
marked: marked 
} 
}) 


CSS 


html, body, #editor { 
margin: 0; 
height: 10096; 


font-family: 'Helvetica Neue', Arial, sans-serif; 


color: #333; 
} 


textarea, #editor div { 
display: inline-block; 
width: 49%; 
height: 100%; 
vertical-align: top; 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
padding: © 20px; 

j 


textarea ( 
border: none; 
border-right: 1px solid £ccc; 
resize: none; 
outline: none; 
background-color: #f6f6f6; 
font-size: 14px; 
font-family: 'Monaco', courier, 
padding: 20px; 

} 


code { 
color: #f66; 
} 


monospace, 


GitHub 提交 Example 


这 个 例子 通过 GitHub 的 API 获取 Vue.js 最 近 的 提交 记录 ， 并 展示 为 一 个 列 
表 。 你 可 以 在 master 和 dev 分 支 之 间 切 换 。 


Latest Vue.js Commits 


* master O dev 
vuejs/vue@master 


e da9e036 - [release] 1.0.13 
by Evan You at 2015-12-24 22:39:37 


e 8c/7fb8 - [build] 1.0.13 
by Evan You at 2015-12-24 22:39:36 


e 0355806 - use pre-hook for setting up prop two-way sync (fix #2064) 
by Evan You at 2015-12-24 22:28:14 


html 


<div id="demo"> 
<hi>Latest Vue.js Commits</h1> 
<template v-for="branch in branches"> 
<input type="radio" 
name="branch" 
: id-"branch" 
: value-"branch" 
v-model-"currentBranch"» 
«label :for="branch">{{branch}}</label> 
</template> 
<p>vuejs/vue@{{currentBranch}}</p> 
<ul> 
<li v-for="record in commits"> 
«a :href="record.html_url" target="_blank" class="commit">{{1 
- <span class="message">{{record.commit.message | truncate}}< 
by <span class="author">{{record.commit.author.name}}</span> 
at «span class="date">{{record.commit.author.date | formatDat 
</li> 
</ul> 
</div> 





var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per p: 
var demo - new Vue(( 
el: '#demo', 


data: { 
branches: ['master', 'dev'], 
currentBranch: 'master', 
commits: null 


created: function () { 
this.fetchData() 


ty 


watch: { 
currentBranch: 'fetchData' 


ty 


filters: ( 
truncate: function (v) { 
var newline = v.indexOf('\n') 
return newline > 0 ? v.slice(0, newline) : v 
3 
formatDate: function (v) { 
return v.replace(/T|Z/g, ' ') 
} 
ty 


methods: { 
fetchData: function () ( 
var xhr - new XMLHttpRequest() 
var self - this 
xhr.open('GET', apiURL + self.currentBranch) 
xhr.onload = function () { 
self.commits = JSON.parse(xhr.responseText ) 


xhr.send() 





#demo { 
font-family: 'Helvetica', Arial, sans-serif; 


j 

a { 
text-decoration: none; 
color: #f66; 

} 

li { 


line-height: 1.5em; 
margin-bottom: 20px; 

} 

.author, .date { 
font-weight: bold; 

} 
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Firebase + 验证 Example 


个 例子 使 用 Firebase 作为 后 台数 据 存 储 ， 并 和 与 客户 端 实时 同步 (你 可 以 在 多 
个 浏览 器 标签 签 中 打开 它 )。 另 外 ， 它 使 用 计算 属性 实时 校 验 ， 并 且 在 添加 /删除 
AAE CSS 过 渡 效 果 。 

















Add User 





Name cannot be empty. 
Please provide a valid email address. 


html 


Firebase + 验证 Example 156 


<div id="app"> 
<ul> 
<li class="user" v-for="user in users" transition> 
<span>{{user.name}} - {{user.email}}</span> 
<button v-on:click="removeUser (user )">X</button> 
</li> 
</ul> 
<form id="form" v-on:submit.prevent="addUser"> 
«input v-model="newUser .name"> 
<input v-model="newUser .email"> 
<input type="submit" value="Add User"> 
</form> 
<ul class="errors"> 
<li v-show="!validation.name">Name cannot be empty.</li> 
<li v-show="!validation.email">Please provide a valid email adı 
</ul> 


</div> 





var baseURL 
var emailRE 


'https://vue-demo.firebaseIO.com/' 
ZN (EAS) DIAA a a :NS0N" ]£(N [^92 0) [ENJNS 7 :NS0N"] +)? 


JEE 
* Setup firebase sync 
af 


var Users = new Firebase(baseURL + 'users') 


Users.on('child added', function (snapshot) { 
var item - snapshot.val() 
item.id - snapshot.key() 
app.users.push(item) 


;) 


Users.on('child removed', function (snapshot) ( 
var id - snapshot.key() 
app.users.some(function (user) ( 

if (user.id === id) { 
app.users.$remove(user ) 
return true 
J 
3) 
3) 


Vee 
* Create Vue app 
ay 


var app = new Vue({ 


// element to mount to 
el: '#app', 


// initial data 
data: { 
users: [], 
newUser: { 


name: 
email: '' 
} 
ty 
// computed property for form validation state 
computed: { 
validation: function () { 
return { 
name: !!this.newUser.name.trim(), 
email: emailRE.test(this.newUser.email) 
} 
ty 


isValid: function () { 
var validation = this.validation 
return Object.keys(validation).every(function (key) { 
return validation[key] 


}) 
} 
ty 
// methods 
methods: { 


addUser: function () { 
if (this.isValid) { 
Users.push(this.newUser) 
this.newUser.name - '' 
this.newUser.email - '' 
} 
i 


removeUser: function (user) ( 


} 
} 


new Firebase(baseURL + 'users/' + user.id).remove() 





body { 
font-family: Helvetica, Arial, sans-serif; 


} 


ul { 
padding: 0; 
} 


.user { 
height: 30px; 
line-height: 30px; 
padding: 10px; 
border-top: 1px solid #eee; 
overflow: hidden; 
transition: all .25s ease; 


} 


.user:last-child { 
border-bottom: 1px solid #eee; 


} 


.v-enter, .v-leave { 
height: 0; 
padding-top: 0; 
padding-bottom: 0; 
border-top-width: 0; 
border-bottom-width: 0; 
} 


.errors { 
color: #f00; 


} 
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表格 组 件 Example 





这 个 例子 创建 了 一 个 可 复 用 的 表格 组 件 ， 用 外 部 数据 使 用 它 。 
sa 


Chuck Norris Infinity 


Bruce Lee 9000 
Jackie Chan 7000 


Jet Li 8000 





html 
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<!-- component template --> 


<script type="text/x-template" id="grid-template"> 


<table> 
<thead> 
<tr> 
<th v-for="key in columns" 
@click="sortBy(key)" 
:Class="{active: sortKey == key}"> 
{{key | capitalize}} 
<span class="arrow" 
:class-"sortOrders[key] > © ? 'asc' 
</span> 
</th> 
</tr> 
</thead> 
<tbody> 
<tr v-for=" 
entry in data 
| filterBy filterKey 
| orderBy sortKey sortOrders[sortKey]"> 
<td v-for="key in columns"> 
{fentry[key]}} 
</td> 
</tr> 
</tbody> 
</table> 
</script> 


<!-- demo root element --> 
<div id="demo"> 
<form id="search"> 


‘dsc ' Ws 


Search <input name="query" v-model-"searchQuery"» 


</form> 
<demo-grid 
:data="gridData" 
:columns="gridColumns" 
: filter -key="searchQuery"> 
</demo-grid> 
</div> 


// register the grid component 
Vue.component('demo-grid', { 
template: '#grid-template', 
props: { 
data: Array, 
columns: Array, 
filterKey: String 
ty 
data: function () { 
var sortOrders = {} 
this.columns.forEach(function (key) { 
sortOrders[key] = 1 


3) 
return ( 
sortKey: '', 
sortOrders: sortOrders 
} 
la: 
methods: ( 
sortBy: function (key) ( 
this.sortKey - key 
this.sortOrders[key] = this.sortOrders[key] * -1 
} 
} 
3) 


// bootstrap the demo 
var demo = new Vue({ 
el: '#demo', 


data: { 
searchQuery: '', 
gridColumns: ['name', 'power'], 
gridData: [ 


{ name: 'Chuck Norris', power: Infinity }, 
{ name: 'Bruce Lee', power: 9000 }, 
{ name: 'Jackie Chan', power: 7000 }, 
{ name: 'Jet Li', power: 8000 } 
] 


} 
}) 


CSS 


body { 
font-family: Helvetica Neue, Arial, sans-serif; 
font-size: 14px; 
color: #444; 

j 


table ( 
border: 2px solid #42b983; 


border-radius: 3px; 
background-color: #fff; 
j 


th { 
background-color: #42b983; 
color: rgba(255,255,255,0.66); 
cursor: pointer; 
-webkit-user-select: none; 
-moz-user-select: none; 
-user-select: none; 


} 


td { 
background-color: #f9f9f9; 
} 


th td {i 
min-width: 120px; 
padding: 10px 20px; 
} 


th.active { 
color: #fff; 


} 

th.active .arrow { 
Opacity: 1; 

j 

.arrow { 


display: inline-block; 
vertical-align: middle; 
width: 0; 
height: 0; 
margin-left: 5px; 
opacity: 0.66; 

j 


.arrow.asc { 
border-left: 4px solid transparent; 
border-right: 4px solid transparent; 
border-bottom: 4px solid #fff; 


} 


.arrow.dsc { 
border-left: 4px solid transparent; 
border-right: 4px solid transparent; 
border-top: 4px solid #fff; 


j 


Zsearch { 
margin-bottom: 10px; 
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} 
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树 状 视图 Example 
这 个 例子 实现 了 一 个 简单 的 树 状 视图 ， 演 示 如 何 递归 使 用 组 件 。 


(You can double click on an item to turn it into a folder.) 


* My Tree [-] 
9 hello 
9 wat 
o child folder [-] 
=" child folder [-] 
" hello 
" wat 
ES 
" hello 
" wat 
=" child folder [-] 
" hello 
" wat 


m + 
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<!-- item template --> 
<script type="text/x-template" id="item-template"> 
<li> 
<div 
:class="{bold: isFolder}" 
@click="toggle" 
@dblclick="changeType"> 
{{model.name}} 


<span v-if="isFolder">[{{open ? '-' : '+'}}]</span> 
</div> 
«ul v-show="open" v-if="isFolder"> 

<item 


class="item" 
v-for="model in model.children" 
:model="model"> 
</item> 
«li @click="addChild">+</1i> 
</ul> 
</li> 
</script> 


<p>(You can double click on an item to turn it into a folder. )</p> 


<!-- the demo root element --> 
<ul id="demo"> 
<item 


class="item" 
:model="treeData"> 
</item> 
</ul> 


i 了 陋 "| 
js 


// demo data 
var data = { 
name: 'My Tree', 
children: [ 
{ name: 'hello' }, 
{ name: 'wat' }, 
{ 
name: 'child folder', 
children: [ 
1 
name: 'child folder', 
children: [ 
{ name: 'hello' }, 
{ name: 'wat' } 
] 


ty 
{ name: 'hello' }, 


{ name: 'wat' }, 


{ 
name: 'child folder', 
children: [ 
{ name: 'hello' }, 
( name: 'wat' ) 
] 
} 


// define the item component 
Vue.component('item', { 
template: '#item-template', 
props: { 
model: Object 
ty 
data: function () { 
return { 
open: false 
} 


3 
computed: ( 


isFolder: function () { 
return this.model.children && 
this.model.children.length 


j 


ty 
methods: { 


toggle: function () { 
if (this.isFolder) { 
this.open = !this.open 


j 

ty 

changeType: function () { 
if (!this.isFolder) { 


Vue.set(this.model, 'children', 


this.addChild() 
this.open - true 


j 

ty 

addChild: function () { 
this.model.children.push({ 

name: 'new stuff' 

3) 

j 

j 
3) 


// boot up the demo 
var demo = new Vue({ 


[1) 


el: '#demo', 


data: { 
treeData: data 
} 
}) 
CSS 
body { 
font-family: Menlo, Consolas, 
color: #444; 
} 
.item [f 
cursor: pointer; 
} 
.bold { 
font-weight: bold; 
} 
ul { 


padding-left: 1em; 

line-height: 1.5em; 

list-style-type: dot; 
} 


monospace, 
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SVG 图 形 Example 


这 个 例子 演示 了 综合 使 用 自 定义 组 件 、 计 算 属性 、 双 向 绑 定 及 SVG 支持 。 





"label" 
j “value” 
: 
"label" 
"value" 
i 
“label” 
“value” 
lic 
{ 
A =| 100 "label": 
B E| 400 y. am 
C El 100 [x] | "label": 
D 目 100| X | 3 value': 
{ 
E EE 100 “label”: 
F El 100| x y DNE 





* input[type- range] requires IE10 or above. 


html 
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<!-- template for the polygraph component. --> 
<script type="text/x-template" id="polygraph-template"> 
<g> 
<polygon :points="points"></polygon> 
<circle cx="100" cy="100" r="80"></circle> 
<axis-label 
v-for="stat in stats" 
:stat="stat" 
: index="$index" 
:total="stats.length"> 
</axis-label> 
</g> 
</script> 


<!-- template for the axis label component. --> 

<script type="text/x-template" id="axis-label-template"> 
«text :x="point.x" :y="point.y">{{stat.label}}</text> 

</script> 


<!-- demo root element --> 
<div id="demo"> 
<!-- Use the component --> 


<svg width="200" height="200"> 
«polygraph :stats="stats"></polygraph> 
</Svg> 
<!-- controls --> 
<div v-for="stat in stats"> 
<label>{{stat.label}}</label> 
<input type="range" v-model-"stat.value" min="0" max="100"> 
<span>{{stat.value}}</span> 
«button @click="remove(stat)">X</button> 
</div> 
<form id="add"> 
<input name="newlabel" v-model="newLabel"> 
«button @click="add">Add a Stat</button> 
</form> 
<pre id="raw">{{stats | json}}</pre> 
</div> 


<p style="font-size:12px">* input[type="range"] requires IE10 or al 





// The raw data to observe 
var stats - [ 

label: 'A', value: 100 }, 
label: 'B', value: 100 }, 
label: 'C', value: 100 }, 
label: 'D', value: 100 }, 
label: 'E', value: 100 }, 


c^ c cS ena 


{ label: 'F', value: 100 } 
] 


// A resusable polygon graph component 
Vue.component('polygraph', { 
props: ['stats'], 
template: '#polygraph-template', 
replace: true, 
computed: { 
// a computed property for the polygon's points 
points: function () { 
var total = this.stats.length 
return this.stats.map(function (stat, i) { 
var point = valueToPoint(stat.value, i, total) 
return point.x + ',' + point.y 


3).join(' ') 
} 
ty 


components: { 
// a sub component for the labels 
'axis-label': { 
props: { 
stat: Object, 
index: Number, 
total: Number 
3 
template: '£Zaxis-label-template', 
replace: true, 
computed: ( 
point: function () ( 
return valueToPoint( 
+this.stat.value + 10, 
this.index, 
this.total 


}) 


// math helper... 
function valueToPoint (value, index, total) { 
var x 0 


var y = -value * 0.8 
var angle = Math.PI * 2 / total * index 
var cos = Math.cos(angle) 
var sin = Math.sin(angle) 
var tx = x * cos - y * sin + 100 
var ty =e SIME y i COS + T100 
return { 
XX 


y: ty 


} 
} 


// bootstrap the demo 
new Vue({ 
el: '#demo', 
data: { 
newLabel: '', 
stats: stats 
}, 
methods: { 
add: function (e) { 
e.preventDefault() 
if (!this.newLabel) return 
this.stats.push({ 
label: this.newLabel, 
value: 100 
3) 


this.newLabel = '' 
3 
remove: function (stat) { 
if (this.stats.length > 3) { 
this.stats.$remove(stat) 
} else { 
alert('Can\'t delete more!') 
} 
} 


CSS 


body { 
font-family: Helvetica Neue, Arial, sans-serif; 


} 

polygon { 
fill: #42b983; 
opacity: .75; 

} 

circle { 
fill: transparent; 
stroke: #999; 

} 

text { 
font-family: Helvetica Neue, Arial, sans-serif; 
font-size: 10px; 
fill: #666; 

} 

label { 
display: inline-block; 
margin-left: 10px; 
width: 20px; 

} 

#raw { 
position: absolute; 
top: 0; 


left: 300px; 
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模 态 组 件 Example 


用 到 的 特性 : 组 件 、prop 传递 、 内 容 传 入 、 


custom header 


default body 


default footer 


html 


模 态 组 件 Example 


过 渡 。 
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<!-- template for the modal component --> 
<script type="x/template" id="modal-template"> 
<div class="modal-mask" v-showz"show" transition="modal"> 
«div class="modal-wrapper"> 
«div class="modal-container"> 


«div class="modal-header"> 
«slot name="header"> 
default header 
</slot> 
</div> 


<div class="modal-body"> 
<slot name="body"> 
default body 
</slot> 
</div> 


<div class="modal-footer"> 
<slot name="footer"> 
default footer 
«button class="modal-default-button" 
@click="Show = false"> 
OK 
</button> 
</slot> 
</div> 
</div> 
</div> 
</div> 
</script> 


<!-- app --> 
<div id="app"> 
«button id="show-modal" @click="ShowModal = true">Show Modal</but 
<!-- use the modal component, pass in the prop --> 
«modal :show.sync="showModal"> 
Sill ee 
you can use custom content here to overwrite 
default content 


m> 
<h3 slot="header">custom header</h3> 
</modal> 
</div> 





// register modal component 
Vue.component('modal', { 
template: '#modal-template', 
props: { 
show: { 
type: Boolean, 
required: true, 
twoway: true 
j 
j 
}) 


// start app 
new Vue({ 
el: '#app', 
data: { 
showModal: false 
} 
}) 


CSS 


.modal-mask { 
position: fixed; 
z-index: 9998; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: rgba(0, 0, 0, .5); 
display: table; 
transition: opacity .3s ease; 


} 


.modal-wrapper { 
display: table-cell; 
vertical-align: middle; 


} 


.modal-container { 
width: 300px; 
margin: Opx auto; 
padding: 20px 30px; 
background-color: #fff; 
border-radius: 2px; 
box-shadow: © 2px 8px rgba(0, ©, ©, .33); 
transition: all .3s ease; 
font-family: Helvetica, Arial, sans-serif; 


j 


.modal-header h3 ( 


margin-top: 0; 
color: #42b983; 
} 


.modal-body { 
margin: 20px 0; 
} 


.modal-default-button { 
float: right; 
} 


he 
* the following styles are auto-applied to elements with 
* v-transition="modal" when their visiblity is toggled 
* by Vue.js. 
* 
* 


You can easily play with the modal transition by editing 
* these styles. 
5f 


.modal-enter, .modal-leave ( 
opacity: 0; 
} 


.modal-enter .modal-container, 

.modal-leave .modal-container { 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 


} 
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Elastic Header Example 


END :le lot: 10) | SQ C 
Header 


with Vue js + dynamics js 





Note this is just an effect demo - there 
are of course many additional details if 
you want to use this in production, e.g. 
handling responsive sizes, reload 
threshold and content scrolling. Those 
are out of scope for this quick little hack. 
However, the idea is that you can hide 
them as internal details of a Vue.js 
component and expose a simple Web- 
Component-like interface. 


html 
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<!-- template for the component --> 
<script type="x/template" id="header-view-template"> 
«div class="draggable-header -view" 
@mousedown="SstartDrag" @touchstart="startDrag" 
Qmousemove-"onDrag" @touchmove="onDrag" 
@mouseup="StopDrag" Qtouchend-"stopDrag" @mouseleave="StopDrag' 
<svg class-"bg" width="320" height="560"> 
<path :d="headerPath" fill="#3F51B5"></path> 
</svg> 
«div class="header"> 
<slot name="header"></slot> 
</div> 
<div class="content" :style="contentPosition"> 
<slot name="content"></slot> 
</div> 
</div> 
</script> 


<draggable-header - view> 
«template slot="header'"> 
<hi>Elastic Draggable SVG Header</h1i> 
<p>with «a href="http://vuejs.org" target="_blank">Vue.js</a> - 
</template> 
<template slot="content"> 
<p>Note this is just an effect demo - there are of course many 
</template> 
</draggable-header -view> 


| — BR 





js 


document.body.addEventListener('touchmove', function (e) { 
e.preventDefault() 


}) 


Vue.component('draggable-header-view', { 
template: '#header-view-template', 
data: function () { 

return { 
dragging: false, 
// quadratic bezier control point 
c: { x: 160, y: 160 }, 
// record drag start point 
start: 1x: 0 y: 0n 


} 
ty 
computed: { 
headerPath: function () { 
return 'M0,0 L320,0 320,160' + 
OO} +t thls Ca K a thas en VE 
' 0,160' 


ty 


contentPosition: function () { 
var dy = this.c.y - 160 
var dampen = dy >0?2: 4 
return { 
transform: 'translate3d(0,' + dy / dampen + 'px,0)' 
j 
} 


3 
methods: { 
startDrag: function (e) ( 
e - e.changedTouches ? e.changedTouches[0] : e 
this.dragging - true 
this.start.x e.pageX 
this.start.y e.pageY 


ty 
onDrag: function (e) { 
e = e.changedTouches ? e.changedTouches[0] : e 
if (this.dragging) (1 
this.c.x = 160 + (e.pageX - this.start.x) 
// dampen vertical drag by a factor 
var dy - e.pageY - this.start.y 
var dampen = dy > 0? 1.5 : 4 
this.c.y = 160 + dy / dampen 


} 
ty 
stopDrag: function () { 
if (this.dragging) { 
this.dragging = false 
dynamics.animate(this.c, { 
x: 160, 
y: 160 
Jo 
type: dynamics.spring, 
duration: 7090, 
friction: 280 


;) 


new Vue(( el: 'body' }) 


CSS 


hi £ 
font-weight: 300; 
font-size: 1.8em; 
margin-top: 0; 


x 
color: #fff; 


j 
a 


Ww 


.draggable-header-view { 
background-color: #fff; 
box-shadow: 0 4px 16px rgba(0,0,0,.15); 
width: 320px; 
height: 560px; 
overflow: hidden; 
margin: 30px auto; 
position: relative; 
font-family: 'Roboto', Helvetica, Arial, sans-serif; 
color: #fff; 
font-size: 14px; 
font-weight: 300; 
-webkit-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 

} 

.draggable-header-view .bg { 
position: absolute; 
top: 0; 
left: 0; 
z-index: 0; 

} 

.draggable-header-view .header, .draggable-header-view .content { 
position: relative; 
z-index: 1; 
padding: 30px; 
box-sizing: border-box; 

y 

.draggable-header-view .header ( 
height: 160px; 

} 

.draggable-header-view .content { 
color: #333; 
line-height: 1.5em; 


a | 


自 定 义 指 令 Example 


在 这 个 例子 中 ，Vue.js 与 一 个 第 三 方 jQuery 插件 (select2) 整 
装 到 一 个 自 定 义 指令 中 实现 。 


Dp 
[ef 
a 
Ej 
[十 
a 


Selected: 0 


default v 


html 


<div id="el"> 
<p>Selected: {{selected}}</p> 
<select v-select="selected" :options="options"> 
<option value="0">default</option> 
</select> 
</div> 


js 


Vue.directive('select', ( 
twoway: true, 
priority: 1000, 


params: ['options'], 


bind: function () ( 
var self = this 
$(this.el) 
.select2(1 
data: this.params.options 
3) 
.on('change', function () { 
self.set(this.value) 


}) 
ty 


update: function (value) { 
$(this.el).val(value).trigger('change' ) 

tr 

unbind: function () { 
$(this.el).off().select2('destroy') 


} 

}) 

var vm = new Vue({ 
el: '#el', 
data: { 


selected: 0, 
options: [ 
{ id: 1, text: 'hello' }, 
{ id: 2, text: 'what' } 
] 
} 
}) 


CSS 


select ( 
min-width: 300px; 
j 


TodoMVC Example 


=A 


这 完全 符合 规范 的 TodoMVC 实现 ，JavaScript 代码 不 超过 120 行 ( 除 
去 注释 和 空 行 )。 


[Source] 
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HackerNews 克隆 Example 


这 是 HackerNews 的 克隆 ， 建 立 在 HN 官方 的 Firebase API 上 ， 并 且 使 用 
Webpack + vue-loader 构建 。 


Built with Vue.js | Source 


1. Sometimes, it’s just time to go home (www.benmilne.com) 
62 points by johns 2 hours ago | comments 

2. Welcome, Ali (blog.ycombinator.com) 
123 points by sama 3 hours ago | comments 

3. How to Start a Startup - Lecture 14: How to Operate (startupclass.samaltman.com) 
64 points by kqr2 4 hours ago | comments 

4. Amazon Echo (www.amazon.com) 
747 points by danielsamuels 10 hours ago | comments 

5. Confluent, a company for Apache Kafka and realtime data (www.linkedin.com) 
18 points by sbilstein 6 hours ago | comments 

6. Running a South Pole data center (arstechnica.com) 
124 points by davidw 16 hours ago | comments 

7. Colorado communities secure the right to build their own broadband 
(www.washingtonpost.com) 
253 points by Libertatea 11 hours ago | comments 

8. Building a simple VGA-adapter for an 8-bit self made computer (tldr.fi) 
88 points by Arjuna 8 hours ago | comments 

9. Show HN: StackShare - discover and discuss software stacks (stackshare.io) 
149 points by yonasb 10 hours ago | comments 

10. On Pins and Needles: Stylist Turns Ancient Hairdo Debate on Its Head (2013) 
(online.wsj.com) 
81 points by gwern 9 hours ago | comments 
11. Microsoft Changes Tack, Making Office Suite Free on Mobile (www.nytimes.com) 

216 points by shitehawk 13 hours ago | comments 

[Source] 
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